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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了浅谈微信页面入口文件被缓存解决方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3652字，纯文字阅读大概需要6分钟。

内容图文

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

一般情况

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)$ {
  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;
}  

4、在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文件呢？
1、难道也是加速页面加载？并不见得是这个原因，因为这可能带来的问题大于带来的优化效果。
2、缓存入口页面和保留上次浏览位置是否有关联呢？感觉关联度也不是那么大

补充：微信浏览器取消缓存的方法

一、通过url参数避免html文件缓存

请求同一个页面的时候，如果url后面的参数不一样，则不会调用微信缓存中的html页面，由此可以解决html页面的缓存问题。例如加个版本号或时间戳

www.xxx.com/home.html?v=1.0

二、避免css和js的缓存

以上工作完成之后，我们解决了html的缓存问题，但是通过访问nginx（或是其他工具）的日志发现，虽然带上了不同的参数，html确实不会缓存了，但是却没有js和css文件的请求。

猜测在这里，微信发现我们所请求的js和css文件在他的缓存里面有了，所以就直接打开缓存中的文件返回给了页面上。（所以这就坑爹了啊！！）

所以我们要在html文件的头部（head）处加上一些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" />

ps，网上很多答案都提供了添加在head处的meta，但是有的人说没有用。目测是因为meta只能保障js和css等资源不会被缓存，但是无法保障html不被缓存。所以，要和url参数方法于meta方法一起使用，才能保障毫无侧漏！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的浅谈微信页面入口文件被缓存解决方案全部内容，希望文章能够帮你解决浅谈微信页面入口文件被缓存解决方案所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---