设置
我有一个由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返回了Etag
和Last-Modified
的新值。contenthash
在不同的部署之间会发生变化。然而JS文件仍然缓存得非常快。这个问题发生在我和其他使用网站的人身上。在这种情况下,它导致了一个死白屏。我不得不告诉每个人做一个硬页面重新加载(这是外国和困惑的最终用户)。
- 有解决方案吗?**我不介意
disk cache
,但如何告诉Chrome在资产文件更改时不使用它?这是Nginx的错误配置吗?
- 有解决方案吗?**我不介意
谢谢你。
1条答案
按热度按时间z18hc3ub1#
你的工作是告诉浏览器它可以缓存一个资源多长时间。你可以通过设置
Cache-Control
响应头(MDN)来做到这一点。如果你不设置它,浏览器可以自由地自己决定多长时间是合适的。这似乎就是你的情况。只要在你的 index.html 响应头上设置
Cache-Control: no-cache
,这个问题就会消失。页面仍然会被浏览器缓存,但是浏览器不会使用它,除非先检查服务器,看看它是否仍然是最新的(这就是ETag
的作用)。但是,对于静态资源,应该设置较长的缓存时间,因为这样对文件名进行版本控制的全部目的是允许任何给定的文件名是不可变的。