laravel-mixでjavascriptのコンパイルをするときのTips

2020/08/05 2020/08/05

こんにちは。Nonです。

今回は正直Laravelのドキュメント読めば分かる内容なので、みんなの力になれるかどうかわからないです。

私の備忘録ついでという感じになると思います。

laravel-mixでVueを作成するときapp.jsが作成されます。

このとき、app.jsをbladeで読み込むとき、おそらくこう書くと思います。

copied.<script src="{{ asset('js/app.js') }}"></script>

しかし、上記のように読み込んでしまうと、リリースされるたびにapp.jsの中身は違うのに、ブラウザのキャッシュのせいで以前のバージョンを読み込んでしまいます。

そこで利用するのはmix()です。

copied.<script src="{{ mix('js/app.js') }}"></script>

このようにすると、Laravelのpublic/mix-manifest.jsonの中身を使用してapp.jsなどを読み込もうとします。

copied.{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

しかし、このままだと変わらずキャッシュが効いてしまうことになるので、javascriptのコンパイルをするときに、public/mix-manifest.jsonの内容が一意になるようにします。

具体的にはwebpack.mix.jsを中身を修正します。

一番最後の行に下記を追加します。

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

このようにすると、npm run prodなどの本番環境にデプロイするCIで一意なキーを持ったpublic/mix-manifest.jsonを作成することができます。

作成したpublic/mix-manifest.jsonはこちら。

copied.{
    "/js/app.js": "/js/app.js?id=d2353c498302a1106cf8",
    "/css/app.css": "/css/app.css?id=0ec4c3ecb9972406f852"
}

こうすることで

copied.<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('css/app.css') }}"></script>

上記のコードは?id="d2353c498302a1106cf8"を含むリンクとなります。

idは一意なキーなので、npm run prodを利用してデプロイするたびに新しいファイルをサーバーへリクエストします。

開発環境でも同様のことが行いたい場合は、

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

からif文を削除すれば大丈夫です。

copied.mix.version();

今回は備忘録ついてでに記事を書いてみました。

これを知るまではServiceWorkerを利用して遠回りに更新してました。。。

ブラウザのキャッシュをServiceWorkerでクリアする処理を書いてました。これを知ったときには何故こんなに初歩的なことを知らなかったのか恥ずかしかったです。

ということで今回はここまで。

次回はStorybookの記事を書いてみようと思います。

その時はよしなに。

.