🐣

Laravel Mixでキャッシュパスティング

2022/05/09に公開

Laravel

JsやCSSファイルのキャッシュクリアを行わないと利用ユーザーが最新のJsやCSSファイルが適用されたWebページを閲覧できない。
その解決方法として、キャッシュパスティングがある。
今回は、Laravel Mixを利用したキャッシュパスティングについて解説を行う。

前提

Laravel Breeze等で、Laravel Mixの環境が導入されていること

webpack.mix.jsに1行追加する

webpack.mix.js

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    .version(); //追記

sample.blade.php

...省略
<head>
	<link rel="stylesheet" href="{{ mix('/css/sample.css') }}">
	<script src="{{ mix('/js/sample.js') }}"></script>
<head>

...省略

これでファイル名にクエリパラメーターが付与されるのでキャッシュされずに最新のJsやCSSのファイルが適用された状態でWebページを表示できるようになる。

前提

Discussion