全国咨询热线:18720358503

微信小程序源码免费_浅谈微信页面进口文件被缓

类别:媒体报道 发布时间:2021-01-08 浏览人次:

浅谈微信页面入口文件被缓存解决方案       缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,这篇文章主要介绍了浅谈微信页面入口文件被缓存解决方案,感兴趣的小伙伴们可以参考一下

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

一般情况

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

 script src="///build/mons.js v=" /script 

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

 script src="///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加一个版本号,比如views/index v=91
<

location / {
 root /mnt/dat1/test/tes-app;
  index.htm;
 ;

这个解析的过程中版本号已经失效了,因此没能达到替换缓存的目的。至于其他的框架下,比如ftl、jsp那种模版编译的有可能生效,不过需要大家自己去验证了。

方案二(有效)

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

location / {
 root /mnt/dat1/test/tes-app;
  index.htm;
 ;
 #### 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页面的缓存问题。例如加个版本号或时间戳

xxx. 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" / 

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

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


推荐阅读

微信小程序源码免费_浅谈微信页面进口文件被缓

探讨手机微信网页页面通道文档被缓存文件处理计划方案 缓存文件针对前端开发网页页面来讲,是加快网页页面载入的神器之一,但也同时产生了许多难题,本文关键详细介绍了...

2021-01-08
网站建设的这些关系你需要懂

企业动态性制造行业新闻资讯建网站有关九度角度强烈推荐信息内容 企业网站建设的这种关联你必须懂 重要词:排行 数据信息 提升 网站制作 检索模块 美工设计编写 网络推广 企业网...

2021-01-08
可查询的小程序_js中获取URL参数的共用方法getR

js中获得URL主要参数的同用方式getRequest()方式案例详细说明 文中根据案例编码给大伙儿详细介绍了js中获得URL主要参数的同用方式getRequest()方式 ,文末给大伙儿提及了js获得url主要参...

2021-01-08
广州凡科互联网科技股份有限公司招聘速卖通销

招聘人数:3职位信息 我们是纯外贸跨境电商, 为了不耽误你宝贵的时间,请在您给我们投简历之前,先考虑以下问题: 我们的地址在荔湾区西增路63号原创元素创意园C10泰荣商务大...

2021-01-08
传统、电商和社会化营销的一点心得

工作中关联,近期一直在和传统式零售公司相处,除开电子器件商务接待以外,近期说的数最多的便是社会发展化互联网营销推广,融合了这种公司的实际操作工作经验,对传统式零售...

2021-01-08
2020年百度新算法更新意味着SEO的调整

过去的一年里,总流量产生了显著的转变,许多网站站长不知道道为何,而百度搜索近期关键升级造成检索优化算法产生了新的转变,特别是在是对搜索引擎蜘蛛在互连在网上检索內容...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信