Laravelはデフォルトでcss, jsにバージョンをつけている

最近知ったことなのですが、LaravelはデフォルトでJSやCSSのバージョン化をしています。

例えば、本番環境htmlのheadタグで読み込まれているcssを確認すると、idがついていることが分かります

<link rel="stylesheet" type="text/css" href="https://hogehoge.com/css/app.css?id=e660913b28a4b2953002">

このcssやjsのバージョン化はwebpack.mix.js に mix.version() というメソッドが書かれてあると、npm run dev や npm run prod を実行したときに自動でidをつけてくれます

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

公式ドキュメントをみるとLaravel5.4のドキュメントに既に mix.versionの記述があるので、だいたいどのバージョンにでもあると思います。

css, jsをバージョン化するメリット

デフォルトでバージョン化されているので特に意識したことありませんでしたが、
バージョン化するということは毎回css, jsについているidが変わります。

idが変わるとブラウザ側では、このcss・jsファイルは前ロードしたものとは違うものだと判断して、キャッシュを利用せずにちゃんと読み込んでくれます。

なので、バージョン化をすることでキャッシュの問題に悩まされる必要がなくなります。

僕はよくサイト制作してお客さんやPMに確認してもらうときに「キャッシュクリアしてご確認ください」とか「chromeのシークレットモードで確認してみてください」ということが多かったのですが、html, cssでサイト制作するにしてもwordpress使うにしても、laravel使うにしても、ファイルをバージョン化するってめちゃくちゃ便利ですね。なんで今まで知らなかったんだ！

終わりに

というわけで、Laravelはデフォルトでcss, jsファイルのバージョン化をしているという話でした。

ぜひ一度ご自身で作られているサイト・webアプリでバージョン化されているか確認してみてくださいね。