nginx更新静态页面客户端缓存不刷新问题

发布时间 2023-04-10 14:08:52作者: 雾霭雾海

问题描述:

频繁部署静态资源,nginx自带缓存未刷新

通过ftp/sftp上传到nginx的静态页(尤其是打包好的单页应用),有可能遇到客户端缓存不刷新的问题,即使重启nginx都无效

客户端浏览器也有缓存,一般关闭进程(手机清理,注意某些app光按返回键退回桌面是不会结束进程的),强制刷新网页等方法可以刷新

解决措施:
html本身可以通过meta设置禁止缓存
而html内引用的js如果内容有变化,则链接也应更新(添加类似?v=xxx的版本号),避免客户端从自己本地取js缓存
服务端nginx本身有缓存,可以用nginx -s reload刷新

nginx配置

location ~ .*\.(gif|html|jpg|jpeg|png|bmp|swf|js|css)$ {
root /project/jd/static/;
#禁止缓存,每次都从服务器请求
add_header Cache-Control no-store;
}

因为这里使用的是正则做匹配,优先级高于 ‘/’ ,所以静态资源就都走下面的location中去找资源了。

实测:未解决

前端页面设置

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

实测:未解决

js、css加上版本号

<link rel="stylesheet" href="style.css?v=1.0.0">
<script src="main,js?v=1.0.0"></script>

问号后面的不起实际作用,仅当作后缀,让浏览器自动检测更新最新的css,js等静态文件。如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。这样在使用静态文件的时候会方便很多,当然也可以修改资源的名称这里就不再说了。

问题延伸

但是JS文件或CSS过多的情况下需要一个一个的去修改版本号,会花费大量的时间,此时就需要版本号是动态获取的了

更换为从messages.properties中读取
<script type="text/javascript" th:src="@{/js/test/index.js(v=#{js.version})}"></script>