アセットパイプラインとは？
sprockets-rails gemで提供されるSprocketsの機能でRails5まではデフォルトで有効になっておりRails上でJavaScriptやCSS等のフロントエンドのスクリプトを効率よく便利に処理するための仕組みです。
アセットパイプラインの流れ
- コントローラごとに作成されたcoffeeスクリプトを高級言語でコンパイルしてjsを作成する。
- 作成されたjs（アセット）を連結して一つのjsを作成する。
- 連結したjs(連結されたアセット）を最小化する。
- 連結したアセットにダイジェストを付与する。
coffeeスクリプトをコンパイルしてJSとして扱う。(プリコンパイル)
CoffeeスクリプトやSCSSを普通にブラウザが認識できるJavaScriptファイルやCSSファイルにコンパイルして静的ファイルにしておきます。この工程をプリコンパイルと呼びます。もしソースコードを更新してサーバを起動する場合は必ずプリコンパイルを行う必要があります。
プリコンパイルを行うためのコマンド
|
1 |
rails assets:precompile |
アセットを連結する。
複数のJavaScriptやCSSファイルを一つに連結することで必要となるリクエスト数を減らし全ての読み込みが終わるまでの時間を短縮します。連結する際はマニフェストファイルにて連結方法を指定します。マニフェストファイルについては下記の記事でも解説しています。
【Ruby on Rails】アセット(CSS,JavaScript)やマニフェストファイルの仕組み(Sprockets、Webpacker）
連結したアセットを最小化する。
スペース、改行、コメントを削除してファイルを最小化し一度のリクエストに必要な通信量の節約をします。
アセットにダイジェストを付与する。
コードの内容からハッシュ値を算出してファイル名の末尾に付与します。コードが変更されればファイル名が変更されるためブラウザのキャッシュの影響で修正が反映されないという問題を防げる。
例えば、下記は実際にソースに埋め込まれたJavaScriptの例ですがソース名の末尾に大量の意味不明な文字列がついていると思いますがこれがダイジェストになります。
|
1 |
<script src="/assets/rails-ujs.self-551fbd47b981dacbb84a270f9123074caf39eb72aaf6f478ab597c6f81435e4b.js?body=1" data-turbolinks-track="reload"></script> |
環境によるアセットパイプラインの挙動の違い
開発環境(development環境)
- コンパイルやダイジェストの付与は逐次行われるので開発の妨げにはなりません。
- 逐次コンパイルを行うので処理速度は遅くなります。
- アセットの連結と最小化は行われません。実際に表示されているソースを見るとJavaScriptやCSSは用意した分だけlinkが貼られています。
本番環境(production環境）
- アセットパイプラインの機能をフルに活用して1つのJavaScriptやCSSを配信します。
この記事へのコメントはありません。