缓存对于前端页面来说，是加速页面加载的利器之一，但也同时带来了很多问题，比如新版本发布之后，怎么替换客户端上的缓存文件呢？大家一般的的解决方案主要有以下几种形式，
一般情况
1、添加版本号，在静态资源文件的引用链接后面添加版本号，这样每次发布的时候更新版本号，就能让叫客户端加载新的资源文件，避免再次使用缓存的老文件，如
<script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script>
2、文件名使用hash形式，webpack中打包文件可直接生成，这样每次打包发布的时候都会产生新的hash值，区别于原有的缓存文件
<script src="//m.test.com/build/activity/js/activity/201807/schoolbeauty/main.19315e5.js"></script>
3、服务器及缓存头设置，不使用缓存，如
location ~* ^.+.(jpg|jpeg|gif|png|ico|css|js)date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
4、在html的meta标签添加缓存设置
<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" />
微（keng）信（die）浏览器
微信浏览器下比较特殊，这个bug一样的存在居然把入口文件html给缓存下来了，这就意味着通过版本号和hash号的形式避免缓存的方案失效了。同时html的meta设置依旧没能生效。
方案一（部分框架无效）
最开始碰到这个问题，我在想是不是可以给入口文件的html加一个版本号，比如
https://m.test.com/views/index?v=1538208193491
理论上来说，这样应该是可以的，但发现没有用。分析原因可能是vue+nginx的形式下，所有的路由都被try_files解析到index.html
location / {
root /mnt/dat1/test/tes-app;
index index.html index.htm;
try_files uri/ /index.html;
}
这个解析的过程中版本号已经失效了，因此没能达到替换缓存的目的。至于其他的框架下，比如ftl、jsp那种模版编译的有可能生效，不过需要大家自己去验证了。
方案二（有效）
再换一种方案，更改服务器配置，强制不缓存入口文件，其他静态正常缓存，比如在nginx中对静态部分如下
location / {
root /mnt/dat1/test/tes-app;
index index.html index.htm;
try_files uri/ /index.html;
#### kill cache
add_header Last-Modified {
root /mnt/dat1/test/tes-app;
access_log off;
expires 30d;
}
最终经过测试，这种方式可以解决微信下入口文件被缓存的问题，问题解决～～
微信页面入口文件被缓存解决方案
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 为了提升网站的访问速度，需要尽可能的减少客户端与服务器端的请求数量与传输的数据量以及服务器从硬盘或数据库读取内容的...
