はじめに
※以下の内容には誤りが含まれる可能性があります
Railsで画像を使った際、アセットパイプラインについて調べたことをまとめました。
具体的な内容
アセットパイプラインとは
JavaScriptやCSSのアセットの最小化または圧縮して連結する工程のことです。
この機能でブラウザがWebページをレンダリングするためのリクエスト数を減らすことができます。
Webブラウザが同時に処理できるリクエスト数には限りがあるので、同時リクエスト数を
減らすことができればその分読み込みが高速になります。
Sporocketsとは
Gemの１つで、Sporoketsを使いアセットパイプラインをしています。
ですが、Rails6系からはwebpackというモジュールバンドラを使用することが多くなっ
ています。役割としてはSporoketsと同じで複数あるJavaScriptファイルを１つにま
とめることができます。
違うのはJavaScriptの依存関係を考慮しながら管理してくれるところです。
そしてRails６からはデフォルトでWebpackerというGemが用意されているので導入しなくてもいいです。プリコンパイルもJavaScriptの依存関係も管理してくれます。
補足として
Railsのアプリケーション内で使用する画像の設置場所はassets配下とpublic配下があります。このとき、assets配下に置く場合はアセットパイプラインの対象となります。
まとめ
- アセットパイプラインをすることでブラウザの読み込みが早くなる。
- Sporoketsを使いアセットパイプラインをしている。
- Rails6からはデフォルトでWebpackerが用意されている。
- 画像をassets配下に置く場合は、アセットパイプラインの対象となる。
最後に
Webpackerについてはまだ知識が深まっていないので詳細は省きます。
その他、モジュールバンドラ、Webpackなども同様です。