之前dll文件是在構(gòu)建機(jī)器上每次都重新構(gòu)建一次，后來(lái)發(fā)現(xiàn)是可以根據(jù)packages的版本號(hào)進(jìn)行對(duì)比，從而判斷是否需要重新構(gòu)建dll。

所以寫了一個(gè)文件在每次提交時(shí)判斷是否需要重新構(gòu)建

優(yōu)化dll構(gòu)建

build.dll.js

'use strict';

function exec(cmd) {
  // 將輸出實(shí)時(shí)打印在控制臺(tái)
  require('child_process').execSync(cmd, { stdio: [0, 1, 2] });
}

const fs = require('fs');
const chalk = require('chalk');
const _ = require('lodash');
// 項(xiàng)目package.json
const packageJson = require('../package.json');
// 用于判斷的版本記錄文件
const dllJson = require('./build.dll.json');
const dllConfig = require('./webpack.dll.config');

console.log(chalk.yellow(' 正在檢查是否需要更新dll文件'));
// 可能webpack.dll.config有多個(gè)入口
const vendors = Object.values(dllConfig.entry).reduce((result, it) => result.concat(it), []);
const oldPackages = dllJson.packages;
const newPackages = _.pick(packageJson.dependencies, vendors);
const isEqual = _.isEqual(oldPackages, newPackages);
if (!isEqual) {
  console.log(chalk.cyan(' => 正在重新構(gòu)建\n'));
  // 執(zhí)行dll
  exec('npm run build:dll');
  // 構(gòu)建后將新的版本記錄寫入文件，version用于HtmlWebpackPlugin寫入index.html
  fs.writeFileSync(
    'build/build.dll.json',
    JSON.stringify({ packages: newPackages, version: dllJson.version + 1 }, null, 2)
  );
  console.log(chalk.green(' => 構(gòu)建完成\n'));
} else {
  console.log(chalk.green(' => 不需要重新構(gòu)建\n'));
}

build.dll.json

{
  "packages": {
    "vuex": "^2.3.1",
    "vue-router": "^2.3.1",
    "vue-tables-2": "^0.6.64",
    "echarts": "^3.8.5"
  },
  "version": 4
}

之后為了自動(dòng)的改動(dòng)vendor.dll.js在index.html的版本號(hào)（用于瀏覽器緩存），需要在webpack.dev.conf.js和webpack.prod.conf.js加入HtmlWebpackPlugin參數(shù)

new HtmlWebpackPlugin({
  // ...省略
  customInfo: {
    vendorVersion: vendorVersion,
  },
}),

在index.html加入版本號(hào)的參數(shù)

<script src="/static/js/vendor.dll.js?v=<%= htmlWebpackPlugin.options.customInfo.vendorVersion %>"></script>

最后一步，在pre-commit加上執(zhí)行這個(gè)文件(需要裝husky)，這樣每次提交就會(huì)先進(jìn)行檢查，如果需要構(gòu)建就會(huì)將構(gòu)建后的文件上傳git

npm i -D husky

"husky": {
    "hooks": {
      "pre-commit": "node build/build.dll.js
    }
  }

總結(jié)

這樣雖然會(huì)減少線上構(gòu)建的時(shí)間，但是因?yàn)?code>vendor.dll.js是在本地構(gòu)建的，可能會(huì)出現(xiàn)本地和線上版本不同的問(wèn)題，之后可以想想怎么進(jìn)一步改造

附件（webpack.dll.config.js）

'use strict';
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const context = path.join(__dirname, '..');

module.exports = {
  // 你想要打包的模塊的數(shù)組
  entry: {
    vendor1: [
      'vuex',
      'vue-router',
      'lodash',
      'vue-tables-2',
    ],
    vendor2: [
      'echarts',
    ],
  },
  output: {
    path: path.join(context, 'static/js'), // 打包后文件輸出的位置
    filename: '[name].dll.js',
    library: '[name]_library',
    // vendor.dll.js中暴露出的全局變量名。
    // 主要是給DllPlugin中的name使用，
    // 故這里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: context,
    }),
    // 壓縮打包的文件
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
        },
      },
      sourceMap: false,
      parallel: true,
    }),
  ],
};