如何防止 Chrome 在资产发生变化时使用磁盘缓存？

Question

设置

我有一个由 Nginx 提供服务的 static 站点。我使用contenthash来构建文件名中带有 contenthash 的资产：

index.html
main.723f2b08bd448896ca78.js
main.18a850dffbe46cca9feb.css

当我编辑我的 JavaScript 代码并重新部署站点时，根目录更改为：

index.html
main.08ddcf9a702a6772ce2d.js # <- new hash
main.18a850dffbe46cca9feb.css

问题

当我在 Chrome 中打开一个新选项卡时，输入我的域名，然后按 Enter - 在“网络”选项卡中，我看到 Chrome仍在加载旧文件：

Name                           Status  Type        Initiator  Size          Time
mydomain.com                   200     document    Other      (disk cache)   4 ms
main.723f2b08bd448896ca78.js   200     script      (index)    (disk cache)  17 ms
main.18a850dffbe46cca9feb.css  200     stylesheet  (index)    (disk cache)  13 ms

当我单击example.com时，响应中的 HTML 包含旧脚本：

<script src="/main.723f2b08bd448896ca78.js"></script

此外， index.html上的响应标头已过时：

Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: W/"63d06108-202"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
X-DNS-Prefetch-Control: off

此外，当我单击main.723f2b08bd448896ca78.js时，响应标头也已过时：

Accept-Ranges: bytes
Content-Length: 605458
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: "63d06108-93d12"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT

如果我重新加载页面，Chrome 会正确加载新文件。 但是如果我再次打开一个新选项卡，输入域，然后按 Enter - 它仍然会加载旧资产！ 这给我留下了硬页面重新加载（ Ctrl + Shift + R ），最终重置了缓存。

期待

当我在隐身模式下加载我的网站时，我得到了预期的正确文件：

Name                            Status  Type        Initiator  Size        Time
mydomain.com                    200     document    Other      557 B       634 ms
main.08ddcf9a702a6772ce2d.js    200     script      (index)    606 kB      1.28 s
main.18a850dffbe46cca9feb.css   200     stylesheet  (index)    87.2 kB     497 ms

index.html响应：

<script src="/main.08ddcf9a702a6772ce2d.js"></script

index.html响应头：

Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: W/"63d249c7-202"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Transfer-Encoding: chunked

main.08ddcf9a702a6772ce2d.js响应头：

Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 605595
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: "63d249c7-93d9b"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT

问题

我不明白我做错了什么 - Nginx 正在返回Etag和Last-Modified新值。 contenthash在部署之间发生变化。 然而 JS 文件仍然被非常积极地缓存。 这个问题发生在我和其他使用该网站的人身上。 在这种情况下，它导致了一个白屏死机，我不得不告诉大家做一个硬页面重新加载（这对最终用户来说是陌生和困惑的）。

有解决办法吗？ 我不介意disk cache ，但如何告诉 Chrome 在资产文件更改时不要使用它？ 这是 Nginx 配置错误吗？

谢谢你。

Answer 1

告诉浏览器它可以缓存资源多长时间是你的工作。 您可以通过设置Cache-Control响应 header ( MDN ) 来实现。 如果你不设置它，浏览器可以自行决定多长时间是合适的。 这似乎就是你的情况。

只需在index.html响应 header 上设置Cache-Control: no-cache ，这个问题就会 go 消失。 该页面仍将由浏览器缓存，但浏览器不会使用它，除非先与服务器检查它是否仍然是最新的（这就是ETag的用途）。

但是，对于您的 static 资源，您应该设置较长的缓存时间，因为像这样对文件名进行版本控制的全部目的是允许任何给定的文件名不可变。