webpacker + react-railsの環境で、react_componentを使うときだけ必要なアセットを読み込むようにする
3491 ワード
はじめに
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便利ですね〜 
以上です。
参考
Author And Source
この問題について(webpacker + react-railsの環境で、react_componentを使うときだけ必要なアセットを読み込むようにする), 我々は、より多くの情報をここで見つけました https://qiita.com/paranishian/items/6dff86054a383808d2a2著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .