asset pipelineについて

railsチュートリアル1周目ではまずチュートリアル通りに手を動かすことを
意識してやったけどハマったり理解できていなかったところがあるため
再度意味を理解しながら2周目を始めた。
スキマ時間とはいえ1周目よりは早く終わらせたい(前回3ヶ月かかった)

今回はasset pipelineについて
以下の順で実行しているようなのでまとめた。

まずは各単語の意味からおさらい

Asset
有用なもの・貴重なものの意
ここではRailsではJavaScriptCSS、画像ファイル、ERBなど
Webアプリケーションを構成する部品を指す。

Pipeline
ルート、補給線の意
Railsでは、効率的な方法を提供するための一連の作業

参考記事から引用

アセットパイプラインとは、JavaScriptCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワーク

1コンパイル

従来のCSSJavaScriptでは記述が難しく、効率が悪いことから
Sass、CofeeScriptなどの高級言語を使用。
これら高級言語はネイティブ言語への変換が必要

変更前→変更後
common.css.sass→common.css
foovar.js.erb.coffee → foobar.js.erb → foobar.js

2統合

1つのファイルにまとめて、通信回数を減らす。
<link>タグの通信コストが大きいため記述回数を減らす

統合前

    link href="common.css" rel="stylesheet" type="texxt/css"
    link href="foobar.css" rel="stylesheet" type="texxt/css"

統合後

    link href="application.css" rel="stylesheet" type="texxt/css"
3圧縮

改行、空行、コメントを取り除いてサイズを縮小する
書くほどでもないですが、いわゆるファイルサイズの縮小です。

4ダイジェスト付与

1度レンダリングされたCSSJavaScriptはブラウザでキャッシュされる。
Asset修正後は表示を反映させるためにファイル名にダイジェストを付与している(おそらく一意な配列)
業務でも以前即時性が求められるページにてPHPでもランダムな文字列を
GETパラメータに付けてリロードするといった処理を実装したりしたのでそれと似たようなものなのかなという印象

参考記事
https://railsguides.jp/asset_pipeline.html


次回は多分cronをやる予定