【Laravel】mix-manifest.jsonの正体

はじめに

Laravelのプロジェクトでscssやjsの修正をする度に差分が発生していた mix-manifest.json というファイル。
最初はこのファイルの役割を知らず、ただ邪魔に感じていたのですが、調べてみたら意外と便利なことをしてくれるファイルであることがわかりました。

ブラウザのキャッシュ回避をしてくれる

以下のようにビルドする度にパラメータidが更新され、それらファイルをViewが読み込むことでキャッシュバスティングを実現していました。

mix-manifest.json

{
    "/share/js/main.js": "/share/js/main.js?id=7381b8dfd82a24bc642b",
}

ブラウザの開発者ツールからscriptタグを確認してみると、たしかにidというパラメータが付いています。

<script src="/share/js/main.js?id=7381b8dfd82a24bc642b"></script>

ファイルの読み込み

mix()でパラメータが付与された静的ファイルを読み込む。

<script src="{{ mix('/share/js/main.js') }}"></script>

実現してくれるツールと設定箇所

これら上記の機能は laravel-mix というツールが提供しているもので、設定は webpack.mix.jsに記載されていることが調べていくうちに判明しました。
たしかに、ファイルの記述を見てみるとビルドやバンドル化の設定がありました。
ファイル最後に記載のversionメソッドでパラメータidを付与しているようです。

webpack.mix.js

let mix = require('laravel-mix');

mix.setPublicPath('public');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

mix.js([
    'resources/assets/js/main.js',
    'resources/assets/js/vendor/drawer-menu.js',
    'resources/assets/js/vendor/swiper-setting.js',
    'resources/assets/js/vendor/view-more.js',
    'resources/assets/js/vendor/overlay.js',
              ︙
], 'public/share/js/main.js') // 複数のjsファイルをmain.jsにバンドルしている
    .autoload({
        "jquery": ['$', 'window.jQuery'],
        "vue": ['Vue', 'window.Vue'],
    }).sourceMaps(); // sourceMapsはブラウザの開発者ツールからデバッグ情報を確認できるようにする

mix.version();

おわりに

Laravelが他フレームワークと比べ便利と言われていた理由が少しわかったような気がします。

参考