uniapp开发微信公众号H5清除缓存问题解决方案_公众号h5缓存

问题及方案：

• 手机第一次关注公众号时进入页面会出现白屏情况，或者页面没有更新，需要用户主动刷新才能解决
• 新建template.h5.html添加meta + vue.config.js + nginx配置

​ 静态缓存

静态缓存，一般指web类应用中，将图片、js、css、视频、html等静态文件/资源通过磁盘/内存等缓存方式，提高资源响应方式，减少服务器压力/资源开销的一门缓存技术。大致可以分为浏览器缓存、服务端缓存、CDN等

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

一、浏览器缓存

浏览器缓存，也称为客户端缓存，常用方式如下在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" />

二、服务端缓存

服务端缓存可以分为内存缓存、磁盘缓存两种。以nginx为例：

#要缓存文件的后缀，可以在以下设置。
http{
    proxy_connect_timeout 10; #服务器连接的超时时间
    proxy_read_timeout 180; #连接成功后,等候后端服务器响应时间
    proxy_send_timeout 5; #后端服务器数据回传时间
    proxy_buffer_size 16k; #缓冲区的大小
    proxy_buffers 4 32k; #每个连接设置缓冲区的数量为number，每块缓冲区的大小为size
    proxy_busy_buffers_size 96k; #开启缓冲响应的功能以后，在没有读到全部响应的情况下，写缓冲到达一定大小时，nginx一定会向客户端发送响应，直到缓冲小于此值。
    proxy_temp_file_write_size 96k; #设置nginx每次写数据到临时文件的size(大小)限制
    proxy_temp_path /tmp/temp_dir; #从后端服务器接收的临时文件的存放路径
    proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=10g; #设置缓存的路径和其他参数。被缓存的数据如果在inactive参数（当前为1天）指定的时间内未被访问，就会被从缓存中移除
 
 
    server {
        listen       80 default_server;
        server_name  localhost;
        root /mnt/blog/;
 
        location / {
 
        }
 
        #要缓存文件的后缀，可以在以下设置。
        location ~ .*\.(gif|jpg|png|css|js)(.*) {
                proxy_pass http://localhost:9090; #nginx缓存里拿不到资源，向该地址转发请求，拿到新的资源，并进行缓存
                proxy_redirect off; #设置后端服务器“Location”响应头和“Refresh”响应头的替换文本
                proxy_set_header Host $host; #允许重新定义或者添加发往后端服务器的请求头
                proxy_cache cache_one; #指定用于页面缓存的共享内存，对应http层设置的keys_zone
                proxy_cache_valid 200 302 24h; #为不同的响应状态码设置不同的缓存时间
                proxy_cache_valid 301 30d;
                proxy_cache_valid any 5m;
                expires 90d; #时间
                add_header wall  "cache"; #报头设置自定义的信息
        }
    }
 
    # 无nginx缓存的blog端口
    server {
        listen  9090;
        server_name localhost;
        root /mnt/blog/;
        location / {
 
        }
    }
}

或者

 更改服务器配置，强制不缓存入口文件，其他静态正常缓存，比如在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;
 
}

三、CDN缓存

CDN是静态缓存加速最典型的代表。CDN技术并不是一门新的技术，它是基于传统 nginx、squid、varnish 等 web 缓存技术，结合 DNS 智能解析的静态缓存加速技术。

1. 节点缓存

   ​ 对需要加速的网站应用，相应的静态资源通过内存缓存+磁盘缓存的方式缓存在服务器端。

2. 精准调度

   ​ 对访问的用户 ip 进行智能解析调度，实现就近缓存节点访问。如果某一台CDN服务器缓存了www.test.com网站数据，当有人访问这台CDN时，就不会再去拉取数据了。

​ 所有的静态文件都添加时间戳

 <script src="https://www.test.com/main.js?v=1623375509210"></script>
 
 <link rel="stylesheet" href="./static/index.776c78d1.css?v=1623375509210">

• 因为所有的静态文件都要加上时间戳，每次都需要去调整，可以直接使用js代码去引用相关文件

Vue/Uniapp解决缓存

uniapp解决缓存的方式与vue一样，但是uniapp兼容了很多平台，所以修改vue.config.js又不太一样。如果uniapp根目录下面没有vue.config.js，则新建vue.config.js文件即可。

// vue.config.js
if (process.env.UNI_PLATFORM === 'h5') {
    // 由于这种方式的打包，会导致编译生成微信小程序（只验证了微信小程序）无法正常使用，所以必须分开
    let filePath = ''
    let Timestamp = new Date().getTime()
    module.exports = {
        // ... webpack 相关配置
        filenameHashing: false,
        configureWebpack: { // webpack 配置 解决js缓存的问题，目前只适配H5端打包
            output: { // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
                filename: `${filePath}[name].js?v=${Timestamp}`,
                chunkFilename: `${filePath}[name].js?v=${Timestamp}`
            },
        }
    }
}else{
    // 其他打包需要的相关配置
    //由于vue-cli打包vue文件的时候静态文件会默认会带有hash值，我们首先要去掉hash值。
    module.exports = {
        // ... webpack 相关配置
        filenameHashing: false
    }
}

 或者

一、index.html文件如何保证不缓存，每次都使用服务器上最新的代码？

此时需要一下标签：

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

 由于自定义了meta标签想要实现自动化打包添加该标签，需要添加自定义html模板

1.新建template.h5.html文件，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<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" />
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

2、 在manifest.json=>h5配置=>index.html模板路径添加文件名称   ：  template.h5.html

添加此标签后用户每次请求的都是服务器是上最新版本的html文件，但是不能保证js文件都是最新的，因此还需要第二步

二、保证每次打包后的js文件名和之前的文件名字都不一样，此时找不到文件名就会到服务器请求最新的文件，即可保安每次不会使用缓存文件，需要在vue.config.js文件添加以下代码

let filePath = '';   // 默认文件路径
let TimeStamp = '';  // 时间戳
let Version = '-V1.0.1-'; // 版本号
//编译环境判断，可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'
  TimeStamp = new Date().getTime();
  process.env.VUE_APP_INDEX_CSS_HASH=`${Version}${TimeStamp}`   //给css文件也使用该时间戳
}
 
module.exports = {
  configureWebpack: {
    output: { //重构文件名
      filename: `${filePath}[name].${Version}${TimeStamp}.js`, // index文件重命名为带有版本号+时间戳的格式
      chunkFilename: `${filePath}[name].${Version}${TimeStamp}.js` // static/js/pages-home-index.-V1-754654657.js  
    },
  },
}

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