Webpack Plugin 自动生成版本号等配置并通过前端服务器获取更新微信缓存旧代码问题

背景

微信H5开发中，遇到了问题：

• 微信H5对Index.html缓存问题，使得提测过程中、发布Release版本后，用户端看到的页面依旧是缓存的html/js/cs
• 在JavaScrip文件分包情况下，项目重新打包后，由于发布时清除了原js文件，如果html已缓存，就会出现加载不到js的错误
• 由于需求和测试需要，支付渠道需要切换，每次为了一个配置参数却需要反复提交TAG

引申问题

• 版本号如何自动生成？能否指定版本号？
• 如何获取版本号等配置？通过Service服务器API获取就会对Service侵入——接口同学要是善良尚可，要是……

思路

本着自己的问题自己解决，既然前端都是服务器在跑，那就直接提供个配置访问文件，打包时复制一份岂不快哉。但是每次提测、发布都还得手动修改版本？怎么行？通过Webpack Plugin、运行脚本自动生成吧。

前提: js等文件需要通过hash配置文件名，否则在微信缓存过期前貌似只能通过手动清理缓存处理。文件名配置参考

使用示例

Env添加版本变量

// 示例 
// 文件：/config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  VERSION:'"v1.0 [' + new Date().toLocaleString() + ']"'
}
// 文件：/config/dev.env.js
module.exports = merge(prodEnv, { // 这里使用了merge, 为了后续判断所以需要设置空字符串
  NODE_ENV: '"development"',
  VERSION: '""', // 开发环境置空才不会判断版本，因为开发环境未配置自动生成版本配置信息
}
// 文件：/config/index.js
module.exports = {
  dev: { ... },
  build: { env: require('./prod.env') }
}

插件代码

'use strict';

var FStream = require('fs');

/**
 * 版本信息生成插件
 * @author phpdragon@qq.com
 * @param options
 * @constructor
 */
function VersionPlugin(options) {
  this.options = options || {};
  !this.options.versionDirectory && (this.options.versionDirectory = 'static');
}

// apply方法是必须要有的，因为当我们使用一个插件时（new somePlugins({})），webpack会去寻找插件的apply方法并执行
VersionPlugin.prototype.apply = function (compiler) {
  var self = this;
  compiler.plugin("compile", function (params) {
    var dir_path = this.options.context + '/' + self.options.versionDirectory;
    var version_file = dir_path + '/version.json';
    var content = '{"version":' + self.options.env.VERSION + '}';
    FStream.exists(dir_path, function (exist) {
      if (exist) {
        writeVersion(self, version_file, content);
        return;
      }
      FStream.mkdir(dir_path, function (err) {
        if (err) throw err;
        console.log('\n创建目录[' + dir_path + ']成功');
        writeVersion(self, version_file, content);
      });
    });
  });
  //编译器'对'所有任务已经完成'这个事件的监听
  compiler.plugin("done", function (stats) {
    console.log("应用编译完成！");
  });
};

const writeVersion = (self, versionFile, content) => {
  console.log("\n当前版本号：" + self.options.env.VERSION);
  console.log("开始写入版本信息...");
  //写入文件
  FStream.writeFile(versionFile, content, function (err) {
    if (err) throw err;
    console.log("版本信息写入成功!");
  });
}

module.exports = VersionPlugin;

• 此插件代码来源于下文参考文章，插件开发参考如何编写一个插件？

配置文件中引入VersionPlugin

// 文件：/build/webpack.prod.conf.js
const config = require('../config');
const VersionPlugin = require('./version-plugin');
const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new VersionPlugin({ path: config.build.assetsRoot, env: config.build.env, versionDirectory: 'static'}),
  ]
}

验证版本号并处理

// 项目配置的入口文件，如文件：./src/main.js
import Vue from 'vue';
import router from './router';
import axios from 'axios';
import { ToastPlugin } from 'vux';
/** 
  * 〖Author〗 MiWi.LIN ＾＾＾＾〖E-mail〗 80383585@qq.com
  *  Copyright(c) 2018/12/28
  * 〖Version〗 1.0
  * 〖Date〗 2018/12/28_上午10:45
  */ 
const { VERSION } = process.env;

Vue.use(ToastPlugin);

function ifVersionCorrect(to, from, next) {
    ...
    next(); // 不适合调用参数, 如next('/')会出现死循环，原因在于参数情况下会第二次执行router.beforeEach的回调函数
}

function checkVersion(to, from, next) {
  console.info('当前版本：', VERSION);
  axios.get(`../static/version.json?_=${Math.random()}`).then((response) => { // 访问前端服务器获取版本号
    if (response.status === 200 && VERSION !== response.data.version) {
      Vue.$vux.toast.text('发现新版本，自动更新中...');
      console.info('新版本：', response.data.version);
      setTimeout(() => {
        location.reload(true);
      }, 500);
      return;
    }
    ifVersionCorrect(to, from, next);
  }).catch((err) => {
    console.error('checkVersion', err);
    ifVersionCorrect(to, from, next);
  });
}

router.beforeEach((to, from, next) => {
  // 未匹配路由跳转到首页
  if (!to.name) {
    next({ name: 'index' });
    return;
  }
  if (VERSION && to.name === 'index') { // VERSION在prod.env中配置，作为区分生产环境
    checkVersion(to, from, next);
  } else {
    ifVersionCorrect(to, from, next);
  }
});

• 这里只对进入Index时校验版本，所以相关逻辑也可以在首页Index.vue中做处理

Shell终端执行打包

> npm run build
当前版本号："v1.0 [2018-12-28 10:00:41]"
开始写入版本信息...
版本信息写入成功!

优化

如何通过编译指令指定版本号？

// 文件：/config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  VERSION: JSON.stringify(process.env.VERSION_ENV) || '"v1.0 [' + new Date().toLocaleString() + ']"'
}
// 文件: /package.json
{
  "scripts": {
  "build:2": "cross-env VERSION_ENV=v2.0 webpack --config build/build.js"
  }
}

Shell终端执行打包

> npm run build:2

说明

• 如不配置build:2，可在终端中直接输入指令内容, 实时动态设置版本，嫌指令太长？去看看Shell终端的alais配置…
• 这样就可以通过process.env.VERSION_ENV获取到值v2.0
• 关于cross-env可以参考使用cross-env解决跨平台设置NODE_ENV的问题，主要是解决不同系统环境指令兼容问题
• 如不使用cross-env，可通过process.argv获取指令参数，方式参考：

for (var i in process.argv) {
  if (process.argv[i] === "--production") { ... }
}
// 或 process.argv.includes('--production')

其他插件

使用webpack进行版本管理工具(webpack-plugin-auto-version)_GitHub
versiony-自动修改package.json中项目版本号

其他处理缓存方式及问题

方式一：

修改服务器nginx no-cache配置，需要运营配置(没试过…)

方式二：

Index.html中配置no-cache：

<html manifest="IGNORE.manifest">  <!--静态html文件遇到微信缓存而无法及时更新,html标签中增加不存在的manifest文件链接-->
<!--no-cache相关-->
<!--no-cache浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200-->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

存在问题：

- IGNORE.manifest 会引起500错误，使用时存在个别机型、微信版本无效，仍使用缓存文件，还得手动刷新
- 不能解决上文提到的分包问题

方式三：

Cache Buster方式: route url添加版本号或随机数

如：/index.html?v=1#/list

存在问题：

- 在项目业务中，跳转微信或其他第三方页面后，原逻辑可能会使参数失效，返回原缓存页面，加载微信中已缓存的旧逻辑
- 还是不能解决上文提到的分包问题
- 微信公众号使用场景中，每次版本发布得在微信后台修改URL
- Vue中同一页面route跳转不会刷新缓存，参考[vue-router源码分析-整体流程](https://github.com/DDFE/DDFE-blog/issues/9)

方式四：

上文提到的，需要接口同学配合。
系统内部通过ajax请求获取版本信息从而提示更新。
存在问题：对后端系统有侵入性，属于下策。

参考文章

webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack插件开发简要
webpack 打包传参 process.env 公司一个项目多个版本的前端架构方案
webpack使用和踩过的坑

赏

您一定是个帅哥， 要不也是个美女！

支付宝

微信