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

wuyumin 发布于2019-07-25 14:29 / 3324人阅读

摘要：方案一部分框架无效最开始碰到这个问题，我在想是不是可以给入口文件的加一个版本号，比如理论上来说，这样应该是可以的，但发现没有用。分析原因可能是的形式下，所有的路由都被解析到这个解析的过程中版本号已经失效了，因此没能达到替换缓存的目的。

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

一般情况

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

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

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标签添加缓存设置

微（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、缓存入口页面和保留上次浏览位置是否有关联呢？感觉关联度也不是那么大
这个问题如果大家有什么好的想法，快来一起讨论讨论呗～～

专线服务超融合服务器微信管理系统登录入口框架入口文件应用入口文件页面缓存

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40150.html

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

摘要：方案一部分框架无效最开始碰到这个问题，我在想是不是可以给入口文件的加一个版本号，比如理论上来说，这样应该是可以的，但发现没有用。分析原因可能是的形式下，所有的路由都被解析到这个解析的过程中版本号已经失效了，因此没能达到替换缓存的目的。缓存对于前端页面来说，是加速页面加载的利器之一，但也同时带来了很多问题，比如新版本发布之后，怎么替换客户端上的缓存文件呢？大家一般的的解决方案主要有以下...

qpwoeiru96 2019-08-06 13:36 评论0 收藏0
微信Webapp开发的各种变态路由需求及解决办法!

摘要：前言最近在使用开发的一个小商城项目在微信上遇到一些坑及变态需求层层深入整理一下给后来人参考一定有你还不知道的调试缓存问题描述微信打开的页面默认是会缓存的这是为了加载更快本来是好事但对于用来调试的我们就比较痛苦了每每更改一些刷新以后怎么样都去前言最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的! ...

laoLiueizo 2019-08-22 18:31 评论0 收藏0
如何开发一款堪比APP的微信小程序（腾讯内部团队分享）

摘要：今年月，腾讯自选股团队接到微信的邀请，做一个的应用测试。三个月后，腾讯自选股成为第一个开发成功的微信小程序。这三个月，是小程序拨云见日从无到有的三个月，自选股团队为探索开发一款完美的小程序奏响了先声。一夜之间，微信小程序刷爆了行业网站和朋友圈，小程序真的能如张小龙所说让用户即用即走吗？其功能能和动辄几十兆安装文件的APP相比吗？开发小程序，是不是意味着移动应用开发的一次推倒重来，...

gplane 2019-08-05 10:31 评论0 收藏0
uni-app 创建的第一个应用

摘要：体验并不好在中，有这个例子，参考使用即可做出类似微信通讯录的页面。启动页计划是不显示导航栏的，为了跳过启动页，添加了一个跳过按钮。本人微信公众号：前端修炼之路，欢迎关注背景介绍经过上一篇文章uni-app官方教程学习手记的学习之后，我就着手做这个项目了。目前已经初步搭出了整体的框架，秉着取之于社会，回馈于社会的原则，我将这个项目开源到GitHub uni-shop，发展壮大un...

luodongseu 2019-06-25 12:29 评论0 收藏0
uni-app 创建的第一个应用

摘要：体验并不好在中，有这个例子，参考使用即可做出类似微信通讯录的页面。启动页计划是不显示导航栏的，为了跳过启动页，添加了一个跳过按钮。本人微信公众号：前端修炼之路，欢迎关注背景介绍经过上一篇文章uni-app官方教程学习手记的学习之后，我就着手做这个项目了。目前已经初步搭出了整体的框架，秉着取之于社会，回馈于社会的原则，我将这个项目开源到GitHub uni-shop，发展壮大un...

tianlai 2019-08-23 13:44 评论0 收藏0