Laravel(6.x) assetファイルにタイムスタンプを使わずmix versionを使う

jsやcss、画像など静的リソース（assetファイル）を扱うとき、ブラウザに保存
されたキャッシュが有効になり、予期した動作にならない場合があります

そういったときに、URLの末尾にタイムスタンプやバージョン情報などを
付与するケースがあります
以下のようにクエリパラメータをつけて別ファイルを取得させているのではないでしょうか

<script type="text/javascript" src="hoge.js?ver=10"></script>
<script type="text/javascript" src="fuga.js?20200101000000"></script>

Laravelではこういったケースに、自動でハッシュ値が付与される仕組みが
用意されています

バージョニング / キャッシュ対策

Laravelのデフォルトプロジェクトを作成し、
auth機能をつけたデフォルト画面で説明します

設定なし

webpack.mix.js

webpack.mix.jsはデフォルトで以下のようになっています

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

resources/views/layouts/app.blade.php

ビューのbladeは以下の記載がデフォルトです

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

〜割愛〜

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

ブラウザ確認

ブラウザで実際にどう呼ばれているのか確認してみます

何も設定していないのでHTMLのscript、linkのURLになにもクエリについていません

version設定

では今度はLaravelの機能をつかってキャッシュが効かないように設定します

webpack.mix.js

最後にversion()を呼び出すようにします

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

resources/views/layouts/app.blade.php

ビューの記載方法を以下のように、asset　→　mix　に変更します

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}" defer></script>

〜割愛〜

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

ビルド実行

書き換えただけでは使えないため、ビルド実行します

npm run dev

または

npm run watch

ブラウザ確認

再度ブラウザで実際にどう呼ばれているのか確認してみます

script、linkのそれぞれリンクの最後に id=ハッシュ値のクエリパラメータが付与されました

コンソールにでていたアクセスログは以下です

$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
[Mon Oct 19 22:08:35 2020] 127.0.0.1:55548 [200]: /js/app.js?id=40c0ea55fd0df7e736e8
[Mon Oct 19 22:08:36 2020] 127.0.0.1:55546 [200]: /css/app.css?id=285bc4b1273162aedfc2

ビルドを再実行すれば、クエリパラメータに新たなハッシュ値が付与されます

まとめ

以上、静的リソースでブラウザキャッシュを効かせない方法として
webpack.mix.jsでのversion()を使った方法の紹介でした