Reactビルドにおけるキャッシュの自動クリア

ブラウザには静的ファイルのキャッシュ問題があることは既にご存知でしょう。 この問題の本質は、パフォーマンス向上のため、ブラウザがスタイルシート、スクリプト、画像ファイルをキャッシュすることです。

これは、ホスティング上でスクリプトやスタイルを変更した場合、 その変更はサイトの新しい訪問者にしか表示されないことを意味します。 以前にサイトを訪れたことのある既存の訪問者は、 キャッシュされたコードのバージョンを参照し続けます。 これはもちろん、許容できません。

幸いなことに、Reactではこの問題は自動的に解決されます。 その解決策は、ビルドされたファイルが名前と拡張子に加えて、 ハッシュと呼ばれるランダムな文字列を持つことです。 このハッシュはファイルの内容に対応しています。 つまり、ファイル内のコードが変更されると、そのファイル名のハッシュも変更されるということです。 これにより、ブラウザはそれを新しいファイルであると認識し、ダウンロードします。

ファイルのハッシュは、index.htmlでの読み込み時に確認できます：