目录
- 问题场景
- 原因
- 解决方法
- 1. 用户自行清理浏览器缓存
- 2. 使用禁用缓存标签,实现禁用浏览器缓存
- 3. 为js和css文件添加版本号
- 4. 修改nginx 配置
- 总结
问题场景
- 代码运行环境:nginx
- 现象:发布新版本代码时浏览器总是有上次缓存
- 结果:页面显示混乱、更新的功能还是上个版本等一系列问题
原因
- 浏览器缓存
解决方法
1. 用户自行清理浏览器缓存
- 优点:清除浏览器缓存后可达到效果。
- 缺点:影响用户体验
2. 使用禁用缓存标签,实现禁用浏览器缓存
- 优点:可达到效果。
- 缺点:每次请求页面都要重新请求,我们还是希望有缓存的
<meta http-equiv=\”Cache-Control\” content=\”no-cache, no-store, must-revalidate\” />
<meta http-equiv=\”Cache\” content=\”no-cache\”>
<meta http-equiv=\”Pragma\” content=\”no-cache\” />
<meta http-equiv=\”Expires\” content=\”0\” />
3. 为js和css文件添加版本号
- 优点:可达到效果。
- 缺点:给所有的静态资源都添加版本号参数,这个参数可以是时间戳或者随机数。
处理方式的代码如下:
<link rel=\”stylesheet\” type=\”text/css\” href=\”${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406\” rel=\”external nofollow\” >
<link rel=\”stylesheet\” type=\”text/css\” href=\”${pageContext.request.contextPath}/static/css/style.css?v=20200110052406\” rel=\”external nofollow\” >
<link rel=\”stylesheet\” type=\”text/css\” href=\”${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406\” rel=\”external nofollow\” >
<link rel=\”stylesheet\” type=\”text/css\” href=\”${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406\” rel=\”external nofollow\” >
4. 修改nginx 配置
(满足以下条件后有缓存可以修改nginx 配置文件)
背景:
1、使用nginx做代理
2、使用webpack等打包出一个唯一的入口文件index.html,或者其他方式的入口html文件
3、入口html文件中js已经使用hash后缀方式加载
=缺点:需要前端人员会配置nginx=
location ~ .*\\.(htm|html)?$ {
#原来这样设置的不管用
#expires -1;
#现在改为,增加缓存
add_header Cache-Control \”private, no-store, no-cache, must-revalidate, proxy-revalidate\”;
access_log on;
}
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持悠久资源。