Share
ブラウザのキャッシュには多くのメリットがあるものの、ウェブサイトの開発時にトラブルを引き起こすこともあります。
①Webサイトのディティールを変更したのに表示されない場合。
これは、初回アクセス時にブラウザがWebサイトのファイルをキャッシュしているため起こります。ブラウザは以前に保存しておいたキャッシュからファイルを表示するため、新しい変更点が表示されません。
②さらに一定期間使用すると、ブラウザは多くのキャッシュファイルを保存するため、動作が重くなり、コンピュータのリソースがより多く消費されるようになります。
通常は、この問題を解決するために手動でキャッシュを消去する方法を見つけなければならず、 これには時間がかかります。
では、どのように自動的にキャッシュをクリアできるでしょうか。
この記事では、Web制作の経験を持つRabilooの技術チームが弊社の知見をもとに、Laravel mixを使ってキャッシュされたCSS/JSファイルを自動的に強制的にリフレッシュさせる方法をご紹介します。
Laravel Mixは、Laravelフレームワークで使用できる柔軟なAPIツールです。主に以下の機能を提供します。
1. JavaScriptファイルやSassファイルのコンパイル
これにより、最新の開発手法を使いつつ、ブラウザ互換性の高いコードを生成できます。
2. プロジェクト内のリソース（アセット）管理
画像（img）、スタイルシート（css）、JavaScriptファイル（js）など、ウェブサイトを構成するすべてのファイルを効率的に管理します。
3. CSSプリプロセッサのコンパイル
SCSS、SASSなどの高度なCSS記法を通常のCSSに変換します。これにより、スタイルの記述が容易になり、保守性が向上します。
4. モダンJavaScriptの変換
最新のJavaScript規格（ES6）で書かれたコードを、広く対応しているES5形式に変換します。これにより、新しい機能を使いつつ、多くのブラウザで動作するコードを生成できます。
これらの処理は、すべてwebpackというツールをベースに行われます。Laravel Mixは、webpackの複雑な設定を隠蔽し、開発者が簡単に利用できるインターフェースを提供します。
結果として、Laravel Mixを使用することで、開発者は最新のフロントエンド技術を活用しつつ、効率的にウェブサイトを構築できます。また、生成されるコードは最適化されているため、ウェブサイトのパフォーマンス向上にも貢献します。
Laravel Mixは、プロジェクト内のすべてのアセット（画像、CSS、JavaScriptなど）を管理し、Webpackを基盤として以下の処理を行います：
CSSプリプロセッサ（SCSS、SASSなど）のコンパイル
ES6からES5へのJavaScriptトランスパイル
アセットの最小化と結合
これにより、開発効率が向上し、ブラウザ互換性が確保されます。
Laravel Mixを使用することで、Webサイト開発に以下の主要なメリットがあります：
パフォーマンス最適化
コードとリソースの最適化によりストレージ使用量を削減
帯域幅の効率的な利用
ユーザー体験の向上
ページ読み込み速度の大幅な改善
よりスムーズなサイト操作性の実現
SEO対策の強化
Googleの評価基準に適合
検索エンジン結果ページ（SERP）でのランキング向上
開発効率の向上
変更したCSS/JSファイルの自動再読み込み
リアルタイムでの更新確認が可能
この最適化により、サイトのパフォーマンス、ユーザー満足度、検索エンジン順位が向上し、開発プロセスも効率化されます。
では、実際にLaravel mixの使用してみましょう。
ホームページから、使用しているOSに合わせたNodejs. をダウンロードし、インストールします。
npm を使う場合は「npm install」を実行
yarn を使う場合は「yarn install」を実行
npm やyarn のバージョンを更新するには「npm update」 や「yarn update」を実行
「node -v」コマンドを使用してnodejsのインストールを確認する
「 npm -v 」コマンドを使用してnpmのインストールを確認する
「 yarn -v 」コマンドを使用してyarn のインストールを確認する
npmまたはyarnのバージョンを更新するには、「npm update」または「yarn update」を使用します。
プロジェクトのルートディレクトリにあるwebpack.mix.jsは、Laravel Mixの設定ファイルです。このファイルで：
Mixのエントリーポイントを設定
アセットのコンパイル方法を定義
Laravel Mixは、Less、Sass、Stylusなど多様なCSSプリプロセッサをサポートしています。これらをブラウザ互換のCSSにコンパイルするには、以下のメソッドを使用します：
mix.less() // Lessのコンパイル
mix.sass() // Sassのコンパイル
mix.stylus() // Stylusのコンパイル例
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制作を承っております。
お見積り・ご相談は無料です。どうぞお気軽にお問い合わせください。
あわせて読みたい：
▶︎Nginxによるロードバランサーでサーバーの負荷分散をする
▶︎SEO対策におけるクライアントサイドレンダリング・サーバーサイドレンダリング
Share