微信页面入口文件被缓存解决方案

缓存对于前端页面来讲，是加速页面加载的利器之一，但也同时带来了不少问题，好比新版本发布以后，怎么替换客户端上的缓存文件呢？你们通常的的解决方案主要有如下几种形式，

通常状况

一、添加版本号，在静态资源文件的引用连接后面添加版本号，这样每次发布的时候更新版本号，就能让叫客户端加载新的资源文件，避免再次使用缓存的老文件，如

<script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script>

二、文件名使用hash形式，webpack中打包文件可直接生成，这样每次打包发布的时候都会产生新的hash值，区别于原有的缓存文件

<script src="//m.test.com/build/activity/js/activity/201807/schoolbeauty/main.19315e5.js"></script>

三、服务器及缓存头设置，不使用缓存，如

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
    root   /mnt/dat1/test/tes-app;
    #### kill cache
    add_header Last-Modified $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;
}

四、在html的meta标签添加缓存设置

<!-- cache control: no cache -->
<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 $uri/ /index.html;
}

这个解析的过程当中版本号已经失效了，所以没能达到替换缓存的目的。至于其余的框架下，好比ftl、jsp那种模版编译的有可能生效，不过须要你们本身去验证了。

方案二（有效）

再换一种方案，更改服务器配置，强制不缓存入口文件，其余静态正常缓存，好比在nginx中对静态部分以下

location / {
    root   /mnt/dat1/test/tes-app;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    #### kill cache
    add_header Last-Modified $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;
}

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
    root   /mnt/dat1/test/tes-app;
    access_log off;
    expires 30d;
}

最终通过测试，这种方式能够解决微信下入口文件被缓存的问题，问题解决～～

题外话

说到这里，微信浏览器为何要缓存html文件呢？一、难道也是加速页面加载？并不见得是这个缘由，由于这可能带来的问题大于带来的优化效果。二、缓存入口页面和保留上次浏览位置是否有关联呢？感受关联度也不是那么大这个问题若是你们有什么好的想法，快来一块儿讨论讨论呗～～