微信公众号H5页面缓存问题（微信缓存了 index.html 入口）

年年CODE

7911人浏览 · 2022-05-13 14:37:32

年年CODE · 2022-05-13 14:37:32 发布

做微信公众号和调试手机页面的时候，避免不了页面要跳转到微信浏览器打开，调试阶段，android版微信浏览器一直都默认缓存html静态资源，每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新，很多时候要清理微信缓存才能看到效果，很是烦人。部分客户装了QQ浏览器，微信实际调用的是QQ浏览器，有时候甚至光清理微信缓存都无效，QQ浏览器的缓存也要清。

经过一番探索微信浏览器确实是在webview的上层做的缓存：就是如果请求过了这个地址，就会存在本地，之后不取线上了。

解决方案是在调试阶段或者频繁更新的页面加入以下头信息

因为是 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" />
 
这样微信浏览器对这个页面将会一直上线拉取了。

但是微信浏览器是把index.html入口文件缓存了,这时候要前端和服务端一起处理。

vue.config.js 前端需要把打包文件生成的js css加上时间戳或者随机，确保每次打包都会更新。在output项配置，并且把生成的index.html进行压缩，去除空格，换行和注释减小文件体积

const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const productionGzipExtensions = ['html', 'js', 'css'];
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 判断是否为二级目录部署
const alpha = process.env.NODE_ENV === 'production' && process.env.VUE_APP_DIR;

const Timestamp = new Date().getTime();

module.exports = {
  publicPath: alpha ? `/${process.env.VUE_APP_DIR}/` : '/',
  // px转rem的配置（postcss-plugin-px2rem插件）
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack(config) {
    config.entry('main').add('babel-polyfill'); // main是入口js文件
    // it can improve the speed of the first screen, it is recommended to turn on preload
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial',
      },
    ]);
  },
  configureWebpack: {
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
        threshold: 10240,
        minRatio: 0.8,
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100,
      }),
      // 配置html的文件
      new HtmlWebpackPlugin({
        template: './public/index.html', // 模板地址
        // title: '自定义title',
        url: process.env.VUE_APP_DIR ? `/${process.env.VUE_APP_DIR}/` : '', // 需要这里传参DIR配置文件里面（二级目录）
        minify: { // 压缩HTML文件
          removeAttributeQuotes: true, // 移除属性的引号
          removeComments: true, // 移除HTML中的注释
          collapseWhitespace: true, // 删除空白符与换行符
          minifyCSS: true, // 压缩内联css
        },
        inject: true, // true 或body 默认值，script标签位于html文件的 body 底部; head script 标签位于 head 标签内
        // hash: true, // 引入 js 文件后面紧跟一个独特的 hash 值
        // filename: 'index-[hash].html', // 输出带hash 值的文件名
      }),
    ],
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      // filename: `js/[name].[chunkhash].${Timestamp}.js`,
      // chunkFilename: `js/[name].[chunkhash].${Timestamp}.js`,
      filename: `js/[name].${Timestamp}.js`,
      chunkFilename: `js/[name].${Timestamp}.js`,
    },
  },

  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 50, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: [], // 要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
            minPixelValue: 0, // 设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },

  // devServer: {
  //   proxy: {
  //     '/epidemic-report-api': {
  //       target: 'https://bbjh.org.cn',
  //       changeOrigin: true,
  //       ws: true,
  //     },
  //   },
  // },
};

服务器nginx配置，默认缓存了其他文件，对index.html拦截实现强制不缓存。每次都要请求服务器，我这个index.html使用html-webpack-plugin插件压缩之后体积从1.4k缩小到了，不到1k。目的减少服务器带宽。

server { 
        listen       80; 
        #add_header Access-Control-Allow-Origin *; 
        #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
        #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 
		#add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy- revalidate, max-age=0'; 
        server_name  *******.com; 
        
        location ~* \.(html)$ { //拦截index.html强制不缓存
                add_header  Cache-Control  "private, no-store, no-cache, must-revalidate, proxy-revalidate"; 
            	root   /opt/static_projects/******; 
        } 
        
        location / { 
            root   /opt/static_projects/******; 
            try_files $uri $uri/ @router; 
            index  index.html; 
        } 
        location @router { 
            rewrite ^.*$ /index.html last; 
        } 
     
}