Rails6のアセットパイプラインを理解する【javascript・css】

記事の内容

Rails6のアセットパイプラインの仕組みを理解するために、調べたことを書き連ねる

対象読者

Rails6のアセットパイプラインを理解したい人

環境

• Rails 6
• ruby 3.1

アセットパイプラインの概要

アセットパイプラインで出来ること

javascriptやcssを結合する

jsやcssファイルを結合して、1ファイルにすることで、ブラウザからのリクエスト数を軽減する

javascriptやcssを圧縮する

改行やスペースを削除して、ファイルサイズを軽減する

sassやcoffee scriptなどをcompileする

sassやcoffee scriptなどで記述されたファイルをcss・jsにコンパイルする

フィンガープリントの追加

jsやcssファイルにフィンガープリントを追加して、キャッシュ対策をする

アセットパイプラインに使用するファイルを配置する場所

自身のアプリケーションが保持するアセットに関しては、app/assets 配下が推奨されている。
上記に配置したファイルがproduction環境ではプリコンパイルされて、public/packs 配下に配置される

アセットパイプラインに関するコマンド

assets:precompile

$ rails assets:precompile

production環境用のファイルをコンパイルするためのコマンド

assets:clobber

$ rails assets:clobber

アセットパイプラインで作成されるファイルを削除するコマンド
※assets:precompileの前に実行し、以前の不要なファイルを削除したりする。