railsでincludeしているファイル内のjsに関して

Question

いつもお世話になっております。

今railsでサービスを開発していてjsの管理に関して上手く言っていないところがあったので質問させて頂きました。

サービスの作りとしては
application.html.erb
各ページごとのhtml.erb

というオーソドックスな作りになっております。

applidation.html.erb内には
・header
・body部分（yieldで各ページをincludeしている）
・footer

などが入っており、
例えばトップページの場合だと

applidation.html.erb + 各ページの内容（yieldでincludeされる（top.html.erb + top.js + top.css））という作りになっております。

上記のような作りにしているとjavascriptやcssの管理で問題が出てきました。
何かというと、yield部分にjavascriptやcssを書くと、htmlのdomの中にjavascriptやcssのタグが入ってしまい大変パフォーマンスが落ちてしまうという問題です。

出来ることなら、ページ内で使用するjavascriptやcssは
cssはheadタグの中に書く
javascriptはbodyの一番最後にまとめて書く
ようにしたいと思っています。

cssのプリセッサやタスクランナーで解決できるなどご意見お伺いしたいです！

ぜひご教授下さい！

Answer 1

Rails3.2以降で導入されたAsset PipelineはJSやCSSを管理するための仕組みで、仰っているような内容を全て解決してくれますよ。

但し、Asset Pipelineを使った場合はJSやCSSが一つのファイルに纏まってしまうという問題があります。
ですので、ページ毎に固有の処理をしたいときは、bodyや上の方のブロック要素にクラスを追加してあげて、そのbodyクラス以下でのみJSやCSSが反映されるようにする必要があります。

Comments

[MasakazuFukami]

ご回答有難うございます！

assetpipeline使おうと思ってたので非常に参考になります！

ただ、質問なのですが、色んなページであるライブラリ（スライド生成のライブラリとか）を読み込んだりしているとそれをassetpipelineに登録しなければなりませんよね？

沢山読み込んでいると結構膨大な量のjsのファイルになりそうなのですが、そこは大丈夫なのでしょうか？
asset pipelineの中身がよくわかっていなかったらすいません(´；ω；｀)

[AknEp]

確かに、結構なサイズのJSになります、MasakazuFukamiさんの理解は概ね正しいと思いますよ。

ただ、Asset PipelineはJS/CSSをminifyしてくれますし、本番環境では事前にprecompileしておくことが出来るので、処理にかかる時間はなく、純粋にminify済みスクリプトを転送する時間だけがかかります。

そして、通信に関して言うと、ファイルが高々キロバイト規模の場合は、HTTP通信のボトルネックはむしろ回数によるところが大きいと言われています。 JSファイルが何個にも分かれているのを逐一とってくるよりは、minifyされた単一ファイルを取ってきた方が早いということですね。

これは私が運用しているサービスの例ですが、jQueryやVue.jsが諸々入ったスクリプトでも200KB程度で、gzip圧縮すると68Kでした。最近のブラウザだとgzの方が使われるはずです。現代の通信環境からすると、かなり小さいサイズだと言えると思います。 アイコン程度の画像でもこのぐらいのサイズになりますし。

加えて、そのアプリケーションを訪れた初回のロードでJS/CSSが全て読めるので、以後のページ遷移は高速になります。

メリットばかり上げましたが、仰るとおりJSのサイズは大きくなるので、アプリケーションの規模が非常に大きな物になってくると、無視できないサイズ(10MB超とか)になってくることは、あり得ます。
（まぁ、その場合はそもそもとしてRailsが向いてるのか、モノリシックアプリケーションとして組まずにMicroservices化すべきではないのか、といったあたりに話が派生していきますが...）

以上、参考になりましたら幸いです

[MasakazuFukami]

詳しく説明していただきありがとうございます！！！！

非常に勉強になりました！！！！！！！