ブラウザのキャッシュに関する問題

ブラウザは、接続されたCSSスタイルシート、JavaScriptスクリプト、 画像ファイルをキャッシュします。キャッシュとは、 接続されたファイルをブラウザがユーザーのサイト初回訪問時のみ ダウンロードすることを意味します。 その後の訪問では、これらのファイルは再度ダウンロードされず、 ブラウザのキャッシュから取得されます。

キャッシュは有用です。これはサイトの読み込み速度を 向上させるために作られました。 結局のところ、ブラウザはインターネットから毎回ダウンロードするよりも、 自身のストレージからファイルを取得する方が速いからです。

しかし、速度の代償として開発時の不便さが伴います。 問題は、もしコードを変更し、その後その変更を ホスティングにアップロードした場合、 すでにあなたのサイトを訪れたことのあるすべてのユーザーは 古いキャッシュされたコードのコピーを持ったままになるということです。

問題に対する最初の解決策

この動作に対処するには、変更されたファイルを毎回 名前変更する必要があります。 実際にはこれは不便なので、巧妙な方法が使われます。 その要点は、ファイルを接続する際に、 ファイル名の後にクエスチョンマーク、等号、そして スクリプトのバージョン番号を付けることです。 このような構造はGETパラメータと呼ばれます。

ファイル名内のGETパラメータは、サーバーの観点からは パスを「壊す」ものではなく、依然として同じファイルを 指し示します。しかし、ブラウザの観点からは、 GETパラメータの変更は、ブラウザにファイルへのパスが 変更されたと認識させ、ファイルを再ダウンロードさせます。

キャッシュに対処するために、コードファイルに変更を加えたときは、 GETパラメータの値を1つ増やす必要があります。 このようなアプローチの適用例を見てみましょう：

問題に対する第二の解決策

より高度なアプローチも存在します。 それは、ファイル名にランダムな文字列を 追加するというものです。例えば、次のように：

これらの文字列はハッシュと呼ばれます。 ハッシュは一意の文字列を表します。 これはファイルの内容から特別な方法で 計算されます。これは、それぞれのテキストが 対応する独自のハッシュを持つことを意味します。 ファイルのテキストが変更された場合、 そのハッシュも異なるものになり、 ファイル名の中でそれを変更する必要があります。

もちろん、手動でハッシュを計算し、 ファイルの名前を変更するのは良い作業とは言えません。 したがって、このアプローチは、ハッシュを自動的に計算し、 ファイルの名前を変更し、さらにHTMLファイル内の ファイル名を新しいものに変更することを可能にする 何らかのツールがある場合にのみ使用されます。 これらすべてを可能にするのがWebpackです。 これについて、このチュートリアル全体を通じて学んでいきます。