はじめに
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
便利ですね〜
以上です。