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

2020/08/05 2020/08/05 #Laravel #javascript #laravel-mix #Tips

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

こんにちは。Nonです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こうすることで

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

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

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

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

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

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

mix.version();

最後に

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

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

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

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

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

その時はよしなに。

.

Non

所属 : 株式会社スマレジ 開発部

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#non's Labo #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4