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

Question

我在 Webpack 文档中阅读它：

它

的工作方式有一个陷阱：如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它尚未更新，客户端将获得它的缓存版本。

我很好奇，是否必须将此机制与资产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？

Answer 1

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

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

有关更多信息，请查看 Ilya Grigorik 的 HTTP 缓存文章、HTTP 条件请求 MDN 页面以及有关资源重新验证的 StackOverflow 答案。