浏览器缓存可以仅由 HTTP 标头控制，而无需使用资产文件的哈希名称吗？答案

【问题标题】：Can browser caching be controlled by HTTP headers alone w/o using hash names for asset files?浏览器缓存可以仅由 HTTP 标头控制，而无需使用资产文件的哈希名称吗？
【发布时间】：2017-01-03 10:10:36
【问题描述】：

我在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？

【问题讨论】：

标签： http-headers browser-cache cache-control http-caching

【解决方案1】：

当用户代理打开页面时，它必须始终获得正确版本的源代码。您有两种选择来实现这一目标：

设置 Cache-Control、Expires 和强验证器 (ETag) 响应标头。通过这种方式，您可以指示用户代理在每次页面加载时执行相对轻量级的条件请求
在源代码文件 URL 中嵌入版本并设置 Cache-Control 和 Expires 响应标头。这样你就可以指示用户代理永久缓存具有特定版本的源代码

有关更多信息，请查看 Ilya Grigorik 的 HTTP Caching article、HTTP conditional requests MDN page 和此 StackOverflow answer 关于资源重新验证的信息。

【讨论】：