[目錄]
背景
引申問題
思路
使用示例

• Env添加版本變量
• 插件代碼
• 配置文件中引入VersionPlugin
• 驗(yàn)證版本號(hào)并處理
• Shell終端執(zhí)行打包

優(yōu)化

• 如何通過編譯指令指定版本號(hào)朴爬？
• 其他插件
  其他處理緩存方式及問題
  參考文章

[TAG]:

• Vue
• JavaScript
• Webpack Plugin
• 自動(dòng)版本號(hào)
• 微信緩存更新

背景

微信H5開發(fā)中，遇到了問題：

• 微信H5對(duì)Index.html緩存問題锋谐，使得提測(cè)過程中西傀、發(fā)布Release版本后，用戶端看到的頁(yè)面依舊是緩存的html/js/cs
• 在JavaScrip文件分包情況下显拜，項(xiàng)目重新打包后枢泰，由于發(fā)布時(shí)清除了原js文件笨蚁，如果html已緩存凶朗，就會(huì)出現(xiàn)加載不到j(luò)s的錯(cuò)誤
• 由于需求和測(cè)試需要瓷胧，支付渠道需要切換，每次為了一個(gè)配置參數(shù)卻需要反復(fù)提交TAG

引申問題

• 版本號(hào)如何自動(dòng)生成棚愤？能否指定版本號(hào)杂数？
• 如何獲取版本號(hào)等配置？通過Service服務(wù)器API獲取就會(huì)對(duì)Service侵入——接口同學(xué)要是善良尚可，要是......

思路

本著自己的問題自己解決反肋，既然前端都是服務(wù)器在跑抓督，那就直接提供個(gè)配置訪問文件，打包時(shí)復(fù)制一份豈不快哉揣炕。但是每次提測(cè)丁恭、發(fā)布都還得手動(dòng)修改版本兔港？怎么行？通過Webpack Plugin欲侮、運(yùn)行腳本自動(dòng)生成吧威蕉。

前提: js等文件需要通過hash配置文件名，否則在微信緩存過期前貌似只能通過手動(dòng)清理緩存處理橄仍。文件名配置參考

使用示例

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, 為了后續(xù)判斷所以需要設(shè)置空字符串
  NODE_ENV: '"development"',
  VERSION: '""', // 開發(fā)環(huán)境置空才不會(huì)判斷版本韧涨，因?yàn)殚_發(fā)環(huán)境未配置自動(dòng)生成版本配置信息
}
// 文件：/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方法是必須要有的，因?yàn)楫?dāng)我們使用一個(gè)插件時(shí)（new somePlugins({})）侮繁，webpack會(huì)去尋找插件的apply方法并執(zhí)行
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創(chuàng)建目錄[' + dir_path + ']成功');
        writeVersion(self, version_file, content);
      });
    });
  });
  //編譯器'對(duì)'所有任務(wù)已經(jīng)完成'這個(gè)事件的監(jiān)聽
  compiler.plugin("done", function (stats) {
    console.log("應(yīng)用編譯完成虑粥！");
  });
};

const writeVersion = (self, versionFile, content) => {
  console.log("\n當(dāng)前版本號(hào)：" + self.options.env.VERSION);
  console.log("開始寫入版本信息...");
  //寫入文件
  FStream.writeFile(versionFile, content, function (err) {
    if (err) throw err;
    console.log("版本信息寫入成功!");
  });
}

module.exports = VersionPlugin;

• 此插件代碼來源于下文參考文章，插件開發(fā)參考如何編寫一個(gè)插件宪哩？

配置文件中引入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'}),
  ]
}

驗(yàn)證版本號(hào)并處理

// 項(xiàng)目配置的入口文件娩贷，如文件：./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(); // 不適合調(diào)用參數(shù), 如next('/')會(huì)出現(xiàn)死循環(huán)，原因在于參數(shù)情況下會(huì)第二次執(zhí)行router.beforeEach的回調(diào)函數(shù)
}

function checkVersion(to, from, next) {
  console.info('當(dāng)前版本：', VERSION);
  axios.get(`../static/version.json?_=${Math.random()}`).then((response) => { // 訪問前端服務(wù)器獲取版本號(hào)
    if (response.status === 200 && VERSION !== response.data.version) {
      Vue.$vux.toast.text('發(fā)現(xiàn)新版本锁孟，自動(dòng)更新中...');
      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) => {
  // 未匹配路由跳轉(zhuǎn)到首頁(yè)
  if (!to.name) {
    next({ name: 'index' });
    return;
  }
  if (VERSION && to.name === 'index') { // VERSION在prod.env中配置彬祖，作為區(qū)分生產(chǎn)環(huán)境
    checkVersion(to, from, next);
  } else {
    ifVersionCorrect(to, from, next);
  }
});

• 這里只對(duì)進(jìn)入Index時(shí)校驗(yàn)版本，所以相關(guān)邏輯也可以在首頁(yè)Index.vue中做處理

Shell終端執(zhí)行打包

> npm run build
當(dāng)前版本號(hào)："v1.0 [2018-12-28 10:00:41]"
開始寫入版本信息...
版本信息寫入成功!

優(yōu)化

如何通過編譯指令指定版本號(hào)罗岖？

// 文件：/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終端執(zhí)行打包

> npm run build:2

說明

• 如不配置build:2涧至，可在終端中直接輸入指令內(nèi)容, 實(shí)時(shí)動(dòng)態(tài)設(shè)置版本，嫌指令太長(zhǎng)桑包？去看看Shell終端的alais配置...
• 這樣就可以通過process.env.VERSION_ENV獲取到值v2.0
• 關(guān)于cross-env可以參考使用cross-env解決跨平臺(tái)設(shè)置NODE_ENV的問題南蓬，主要是解決不同系統(tǒng)環(huán)境指令兼容問題
• 如不使用cross-env，可通過process.argv獲取指令參數(shù)哑了，方式參考：

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

其他插件

使用webpack進(jìn)行版本管理工具(webpack-plugin-auto-version)_GitHub
versiony-自動(dòng)修改package.json中項(xiàng)目版本號(hào)

其他處理緩存方式及問題

方式一：

修改服務(wù)器nginx no-cache配置赘方，需要運(yùn)營(yíng)配置(沒試過...)

方式二：

Index.html中配置no-cache：

<html manifest="IGNORE.manifest">  <!--靜態(tài)html文件遇到微信緩存而無法及時(shí)更新,html標(biāo)簽中增加不存在的manifest文件鏈接-->
<!--no-cache相關(guān)-->
<!--no-cache瀏覽器會(huì)緩存，但刷新頁(yè)面或者重新打開時(shí) 會(huì)請(qǐng)求服務(wù)器弱左，服務(wù)器可以響應(yīng)304窄陡，如果文件有改動(dòng)就會(huì)響應(yīng)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 會(huì)引起500錯(cuò)誤，使用時(shí)存在個(gè)別機(jī)型拆火、微信版本無效跳夭，仍使用緩存文件涂圆，還得手動(dòng)刷新
- 不能解決上文提到的分包問題

方式三：

Cache Buster方式: route url添加版本號(hào)或隨機(jī)數(shù)

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

存在問題：
- 在項(xiàng)目業(yè)務(wù)中，跳轉(zhuǎn)微信或其他第三方頁(yè)面后币叹，原邏輯可能會(huì)使參數(shù)失效润歉，返回原緩存頁(yè)面，加載微信中已緩存的舊邏輯
- 還是不能解決上文提到的分包問題
- 微信公眾號(hào)使用場(chǎng)景中颈抚，每次版本發(fā)布得在微信后臺(tái)修改URL
- Vue中同一頁(yè)面route跳轉(zhuǎn)不會(huì)刷新緩存踩衩，參考vue-router源碼分析-整體流程

方式四：

上文提到的，需要接口同學(xué)配合贩汉。
系統(tǒng)內(nèi)部通過ajax請(qǐng)求獲取版本信息從而提示更新驱富。
存在問題：對(duì)后端系統(tǒng)有侵入性，屬于下策匹舞。

參考文章

webpack + vue 項(xiàng)目 自定義 插件 解決 前端 JS 版本 更新 問題
Webpack插件開發(fā)簡(jiǎn)要
webpack 打包傳參 process.env 公司一個(gè)項(xiàng)目多個(gè)版本的前端架構(gòu)方案
webpack使用和踩過的坑