Share
【Laravel mix】キャッシュされたCSS/JSファイルを自動的に強制クリア
ブラウザのキャッシュには多くのメリットがあるものの、ウェブサイトの開発時にトラブルを引き起こすこともあります。
①Webサイトのディティールを変更したのに表示されない場合。
これは、初回アクセス時にブラウザがWebサイトのファイルをキャッシュしているため起こります。ブラウザは以前に保存しておいたキャッシュからファイルを表示するため、新しい変更点が表示されません。
②さらに一定期間使用すると、ブラウザは多くのキャッシュファイルを保存するため、動作が重くなり、コンピュータのリソースがより多く消費されるようになります。
通常は、この問題を解決するために手動でキャッシュを消去する方法を見つけなければならず、これには時間がかかります。
では、どのように自動的にキャッシュをクリアできるでしょうか。
この記事では、Web制作の経験を持つRabilooの技術チームが弊社の知見をもとに、Laravel mixを使ってキャッシュされたCSS/JSファイルを自動的に強制的にリフレッシュさせる方法をご紹介します。
Laravel mixとは
Laravel Mixは、jsファイルやsassファイルをコンパイルしてLaravel上で使えるようにする柔軟なAPI です。
プロジェクト内のimg、css、jsなどのすべてのリソース（アセット）を管理し、すべてのcssファイル、SCSS、SASSなどのjsプリプロセッサのcssへのビルド、ES6から一般的なブラウザでも解釈できる ES5 への変換などをwebpackに基づいて行います。
WebサイトでLaravel mix 使用するメリット
WebサイトでLaravel mix 使用するメリットは以下の通りです。
-
コードの最適化、ウェブサイトの最適化によりストレージサイズを縮小し、帯域幅を最適化する。
-
ウェブサイトの読み込みを高速化し、より良いユーザーエクスペリエンスを提供する
-
Googleの評価を高め、WebサイトのSEO順位を上げることができる
-
キャッシュされたCSS/JSファイルを自動的にブラウザで強制的にリロードさせ、Webサイトの変更点を即座に表示する
関連記事: キャッシング技術を活用してパフォーマンスを向上させる
Laravel mixの使用方法
では、実際にLaravel mixの使用してみましょう。
ステップ1
nodejs をインストールする
ホームページから、使用しているOSに合わせたNodejs. をダウンロードし、インストールします。
ステップ2
npm や yarnをインストールする（yarnはnpmよりも高速にパッケージを管理できる）
-
npm を使う場合は「npm install」を実行
-
yarn を使う場合は「yarn install」を実行
-
npm やyarn のバージョンを更新するには「npm update」 や「yarn update」を実行
ステップ3
インストール完了後、以下のコマンドを実行し、正常にインストールされたかどうかを確認
「node -v」コマンドを使用してnodejsのインストールを確認する
「 npm -v 」コマンドを使用してnpmのインストールを確認する
「 yarn -v 」コマンドを使用してyarn のインストールを確認する
npmまたはyarnのバージョンを更新するには、「npm update」または「yarn update」を使用します。
ステップ4
laravel mixを使用してプロジェクトを設定をする
プロジェクトのルートディレクトリには、webpack.mix.jsというファイルがあります。これは、Mixがスクリプトをスキャンして実行するためのエントリーポイントを設定するファイルです。ここから、Laravel Mixはアセットをどのようにコンパイルするかを正確に決定します。Laravel MixはLess、Sass、Stylusなどの多くのCSSプリプロセッサー言語をサポートしています。
cssプリプロセッサをブラウザが理解できるcssファイルにコンパイルするため、以下のように実行
ess(), sass(), stylus() を使ってcssプリプロセッサをブラウザが理解できるcssファイルにコンパイルする
cssプリプロセッサをブラウザが理解できるcssファイルにコンパイルする
styles() 、scripts() を使って、通常のCSSファイルを1つのファイルにコンパイルする
普通のCSSファイルを1つのファイルにコンパイルする
copyDirectory()を使ってディレクトリをコピーし、copy()を使ってファイルをコピーする
ディレクトリ・ファイルをコピーする
バージョンを付ける
これはとても便利な機能です。通常、ブラウザはcssやjsのファイルを一定期間キャッシュします。その結果、ウェブサイトの最新の変更がすぐに表示されなくなります。これを解決するために、version()メソッドを使用し、ブラウザにキャッシュをクリアさせ、最新バージョンでファイルを再読み込みさせます。
バージョンを付ける
コンパイル後の出力ファイルをmix()メソッドでファイルをHTMLコードに挿入する
ファイルをHTMLコードに挿入する
コンパイルファイルの実行に使用するコマンドは以下の通りです。
- npm run dev このコマンドは、mixファイルを1回実行する
- npm run watch 現在のファイルをミックスし、ミックスされるファイル（webpack.mix.jsフォルダ内のファイル）を監視して、変更があった場合に、代わりにmixを実行してくれるコマンドです。これは弊社のプロジェクトでもよく使われます。
- npm run hot すべてのmixのタスクを実行しますが、アクティブな状態を維持し、アセットの変更を追跡する。
もし変更があれば、その変更でモジュールを更新し、その変更についてアプリケーションに報告し、アセットを再読み込みすることなくブラウザでコードを更新します。 - npm run prod すべてのmixタスクを実行し、出力ファイルを最適化し、その結果を使ってアプリケーションをサーバーにデプロイすることができる。
まとめ
今回の記事では、Laravel mixを使用してブラウザにキャッシュされたCSS/JSファイルを強制的にリロードさせる方法をご紹介しました。
弊社ラビローはWeb開発の長年の経験を活かして、日本市場向けのWeb制作を承っております。
お見積り・ご相談は無料です。どうぞお気軽にお問い合わせください。
Share