Laravel Mixでバージョンを自動的に付与してキャッシュを自動更新【#np2020】

CSSファイルなどの静的ファイルはブラウザにキャッシュされ、内容を変更しても更新されないことがあります。それを避けるためにファイル名に次の様な引数を付けるのが定番になっています：

css/app.css?201905201034

Laravel Mixのコンパイルではこれを自動化出来ます。
詳しくはドキュメントを読んでください。


バージョン付け／キャッシュ対策 | アセットのコンパイル(Laravel Mix) 5.5 Laravel

試してみる

webpack.mix.js に version() を追加します。

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
;

↓

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version()
;

さらにテンプレートから呼び出す際に mix() を使うようにします（デフォルトで使われていると思います）。

<link rel="stylesheet" href="css/app.css"></script>

↓

<link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>

これが出来たら、コンパイル。

npm run dev

どうなるのか？

public直下に「mix-manifest.json」というファイルが作られます。中身はこんな感じ。

{
"/js/app.js": "/js/app.js?id=aaee48fee431a0c6c25f",
"/css/app.css": "/css/app.css?id=35978cdc6a38f7d64fbb"
}

描画するときには、これに従って「/css/app.css」が「/css/app.css?id=35978cdc6a38f7d64fbb」に変換されて読み込まれるという仕組み。id部分がコンパイルごとに更新されるので、コンパイルとコンパイルの間はキャッシュが使われ、コンパイルが行われるとキャッシュが更新されるという仕組みになります。手動だとついidを更新し忘れて慌てるので、これは便利。


開発環境では要らない、本番環境だけ欲しいという人は、ドキュメントで紹介されている「npm run productionのときだけバージョン付けをする」方法を使うと良いと思います。

if (mix.inProduction()) {
mix.version();
}

ちなみに：CloudFrontを使っている場合

CloudFrontのキャッシュが強力すぎるので、これまではcssやjsはディレクトリごとキャッシュから外していましたが、バージョン付けを行うことでCloudFrontのキャッシュも更新されるようになったので、すべてキャッシュするように設定変更しました。おかげでより高速になりました。コンパイルしてまとめたCSSやJSは重いですからね……