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

hk8txs48  于 2023-01-28  发布在  Go
关注(0)|答案(1)|浏览(192)

设置

我有一个由Nginx提供服务的静态站点。我使用Webpack来构建文件名为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),最终重置缓存。

期望

当我在Incognito中加载我的站点时,我得到了预期的正确文件:

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返回了EtagLast-Modified的新值。contenthash在不同的部署之间会发生变化。然而JS文件仍然缓存得非常快。这个问题发生在我和其他使用网站的人身上。在这种情况下,它导致了一个死白屏。我不得不告诉每个人做一个硬页面重新加载(这是外国和困惑的最终用户)。

    • 有解决方案吗?**我不介意disk cache,但如何告诉Chrome在资产文件更改时不使用它?这是Nginx的错误配置吗?

谢谢你。

z18hc3ub

z18hc3ub1#

你的工作是告诉浏览器它可以缓存一个资源多长时间。你可以通过设置Cache-Control响应头(MDN)来做到这一点。如果你不设置它,浏览器可以自由地自己决定多长时间是合适的。这似乎就是你的情况。
只要在你的 index.html 响应头上设置Cache-Control: no-cache,这个问题就会消失。页面仍然会被浏览器缓存,但是浏览器不会使用它,除非先检查服务器,看看它是否仍然是最新的(这就是ETag的作用)。
但是,对于静态资源,应该设置较长的缓存时间,因为这样对文件名进行版本控制的全部目的是允许任何给定的文件名是不可变的。

相关问题