现象
公司的项目使用webpack打包,会自动在生成的资源文件名中加入hash,防止浏览器缓存。
但是有一个现象一直很令人费解:项目部署后,再次打开浏览器=>输入url=>回车, 会发现加载的仍然是旧版网页,只有按F5刷新后才会正常加载。
原因
经过观测浏览器network,发现该问题产生的问题如下:
当浏览器向服务器发起对index.html的请求时,服务器的返回头中没有对缓存进行设置,于是在浏览器的下一次非刷新请求时,就会自动在本地缓存中拿到之前缓存好的index.html,而且index.html中引用的资源文件也都是已经在浏览器中缓存好的,所以此时浏览的就一定是旧版网站。
解决
设置Nginx配置文件中的location项即可,使其返回index.html时,自动添加不要缓存的响应头,这样每次浏览器就都会去服务器拿最新的index.html了。
这里偷懒了,只匹配了html(返回资源路径中存在“html”就会带相应的缓存响应头),正确一点的做法其实是“html$”,匹配html结尾的资源。
location / {
index index.html;
if ($uri ~* "html") {
add_header Cache-Control "no-cache, no-store, max-age=0, must-revalidate";
}
}