はじめに
webpacker+react-railsを使ってRailsプロジェクトにReactを導入しています。
-
javascript_pack_tagでアセットを読み込む -
react_componentでReactコンポーネントを読み込む
ってのをマニュアルどおりやってましたが、、、webpackでcompileされるjsが結構大きい。（当然なんだけど）
そして、Reactは部分的に導入しただけで全ページで使ってるわけじゃないのでサイトスピードに影響しててつらい。
とはいえ、毎回アセットの読み込みとreact_componentの記述を併記するのつらい。
ってことで、Reactコンポーネントを使用しているページにだけアセットを読み込むようにヘルパーを作りました。
やったこと
まずはlayoutファイルを修正。
app/views/layouts/application.slim
head
= javascript_include_tag 'application'
- = javascript_pack_tag 'application'
+ = yield :webpacker_assets
react_componentをラップしたヘルパーを追加。
app/helpers/application_helper.rb
def render_react_component(*args, &block)
content_for :webpacker_assets do
assets = []
assets << javascript_pack_tag('application')
assets << stylesheet_pack_tag('application')
assets.join("\n").html_safe
end
react_component(*args, &block)
end
今までreact_componentを使ってた部分を置き換える。
- = react_component('Hoge', props)
+ = render_react_component('Hoge', props)
yield, content_for便利ですね〜 
以上です。