web-dev-qa-db-ja.com

ブラウザのキャッシュは、アセットファイルにハッシュ名を使用せずにHTTPヘッダーだけで制御できますか？

私はそれを Webpack docs で読んでいます：

その仕組みには落とし穴があります。新しいバージョンをデプロイするときにリソースのファイル名を変更しないと、ブラウザーは更新されていないと判断する可能性があり、クライアントはキャッシュされたバージョンを取得します。

私は興味がありますが、アセットファイルが変更されたことをブラウザに通知するために、このメカニズムをアセットのいファイル名main.55e783391098c2496a8f.jsで使用することは必須ですか？

HTTPヘッダーのみで制御できますか？標準には、ブラウザがアセットをキャッシュする方法を制御する複数のHTTPヘッダーがあります。

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
Date: Wed, 24 Aug 2020 18:32:02 GMT
Last-Modified: Tue, 15 Nov 2024 12:45:26 GMT
ETag: x234dff
max-age: 12345

これらのヘッダーを単独で使用できますか？または、ファイル名main.55e783391098c2496a8f.jsのハッシュ部分について気にする必要がありますか？

cachehttp-headerscache-control
2
Green

はい、ブラウザに何もキャッシュしないように指示できますが、訪問者はページをロードするたびにアセットを再ダウンロードする必要があるため、サイトは遅くなります。

あなたが参照するファイルは自動生成されるので、あなたがそれらに「親しまれている」理由はわかりません。それらはあなたもあなたの訪問者も対処する必要のない単なるファイル名です。

それが本当にあなたにとって問題なら、幸せな媒体は「いい」名前を保持し、1、2日の短い有効期限を持つことです。そのため、セッション内のさまざまなページの読み込みによってファイルが再ダウンロードされることはありませんが、数日後に戻ってくると、間違いなく最新バージョンが取得されます。

1
DisgruntledGoat

アセット（jsまたはcss）でハッシュ名を使用する必要はありません。 ブラウザーはETAGからのファイル変更について知っています 。

この回答も役立つかもしれません 。

1
Goyllo

まあ、キャッシュしないように指示すると、何もキャッシュされなくなります。そのため、ファイル名を変更する必要がありますが、表示するほどくなくてもかまいません。一部のクライアントでは、main-01012017.jsのような変更の日付を追加します

0
Rob