🙆

ビルドするアセットファイル名にハッシュを付与する意味とは

2024/09/16に公開

バンドラー等のツールでJSやCSSファイルをビルドするとき、ファイル名にハッシュを付与するのはなぜか。
それは、ブラウザに残った古いキャッシュを破棄し、新しいファイルをユーザーに届けるため。

ブラウザはパフォーマンス向上のため、以前にサーバーからダウンロードしたアセットファイル(JS、CSS、画像など)をブラウザのキャッシュに保存する。そうすることで、ユーザーが再びウェブサイトを訪れたとき、キャッシュしてあったファイル(手元に残しておいたファイル)を提供する。こうやって表示速度の向上を実現している。

しかし、JSやCSSファイルに変更を加えたときはその変更をユーザーに届ける必要がある。
このとき、バンドラーはハッシュ値をファイル名に付与することで、ブラウザに「これは新しいファイルだから読み込んでね」とお願いすることができる。

そしてHTMLファイル内で新しい名前のファイルが参照され、ブラウザは「あ、CSSファイルの名前が変わってる。内容が変わったんだろうな。じゃあ今までのキャッシュは捨てて、この新しいファイルをサーバーからダウンロードしよう!」と判断する。

逆に、ハッシュが変わらない限り、ブラウザはキャッシュをユーザーに届け続ける。

Discussion