Laravelでnpmを利用したら生成されるファイルにmix-manifest.jsonがあります。
なんか生成されるけれどこれ何？いらなくない？というところなのですが実はこれ、ちゃんと設定をすると便利なんです。
ブラウザのキャッシュ
「あれ？何かうまく動かないな...あー！キャッシュ残ってたかー！」というのはWeb開発している人は誰しも通った道かと思います。
JSやCSSなどの静的ファイルはブラウザがキャッシュします。高速化されてありがたいのですが、これにより更新が反映されずJSが動作しなかったりスタイルがあたらなかったりします。
そのため、読み込み時にapp.css?m=20220123というようにアップデートした日付などをパラメータにつけて、別ファイルのようにブラウザに見せることでキャッシュ回避するという手法があります。
mix-manifest.json はこれの自動化をしてくれます。
設定方法
設定方法は簡単です。
webpack.mix.js
version()メソッドを追加
e.g.
mix.js('resources/js/app.js', 'public/js')
.version();
対象のjs/cssの読み込みはmix()で行う
e.g.
<script src="{{ mix('/js/app.js') }}"></script>これだけです！
これにより、mix-manifest.json は下記のようになります。（JSとCSS両方ある場合の例です）
{
"/js/app.js": "/js/app.js?id=87b0264e0c893dc1bd3509f0ff35bde8",
"/css/app.css": "/css/app.css?id=68b329da9893e34099c7d8ad5cb9c940"
}実際の読み込み箇所のソースは下記のように出力されます。
<script src="/js/app.js?id=87b0264e0c893dc1bd3509f0ff35bde8"></script>idというパラメータにハッシュ化された文字列がついていますね。
これにより、jsやcssに変更があった場合にキャッシュされず確実に更新されたものが読み込まれるのでブラウザキャッシュによるトラブルを回避できます。
.gitignoreにいれていい？
ちなみに.gitignoreにいれていいかどうかでいくと、デプロイ時にnpm runが自動で走る場合など特定条件ではignoreしてもうまく動くかと思いますが
運用方法によってはいつまでも古いパラメータがついたままで、過去のJSやCSSのキャッシュ効いてしまったり、エラーがでて動かないこともあります。
基本的にはignoreせず、gitに反映しておく方がよいです。
参考：
https://readouble.com/laravel/8.x/ja/mix.html#versioning-and-cache-busting