减少 webpack 打包时间之 DllPlugin 预编译

没错，接手的项目打包时间又是巨慢

DllPlugin 也是我们可以采用的有效方法之一

DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案

首先安装 webpack-cli

cnpm install webpack-cli --save-dev 

新建 webpack.dll.config.js 文件处理 dll 插件配置

const path = require('path')
const webpack = require("webpack");
var config = require('./config');

module.exports = {
    entry: config.library,
    output: {
        path: path.join(__dirname, "public/vendor"),
        filename: "[name].dll.js",
        library: "[name]_[hash]" // vendor.dll.js中暴露出的全局变量名
    },
    plugins: [
        new webpack.DllPlugin({
            // manifest缓存文件的请求上下文
            context: process.cwd(),

            // manifest.json文件的输出位置
            path: path.join(__dirname, 'public/vendor', '[name]-manifest.json'),

            // 定义打包的公共vendor文件对外暴露的函数名
            name: '[name]_[hash]'
        })
    ]
}

新建配置打包入口文件 config/index.js, 这里映射的是上面 dll.config.js 中 entry 入口的配置，在下面可以对入口文件做一些分组：

module.exports = {
  // 定义程序中打包公共文件的入口文件
  library: {
    vue: ['vue', 'vuex', 'vue-router', 'axios', 'crypto-js',
      'lodash.get', 'lodash.pick', 'lodash.remove', 'md5', 'dayjs', 'xml2js'],
    antvue: ['ant-design-vue'],
    viser: ['viser-vue'],
    tinymce: ['tinymce'],
    codemirror: ['codemirror'],
    antv: ['@antv/data-set'],
    bpm: ['bpmn-js', 'bpmn-moddle', 'camunda-bpmn-moddle']
  }
}

vue.config.js 文件中，需要在configureWebpack中配置忽略已编译的文件：

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const webpack = require('webpack')

.....

configureWebpack: config => { 

    if (process.env.NODE_ENV === 'production') {
      config.plugins = [
        ...config.plugins,
        ...Object.keys(dllConfig.library).map(name => {
          return new webpack.DllReferencePlugin({
            context: '.',
            manifest: require(`./public/vendor/${name}-manifest.json`),//引入打包后生生成的manifest文件
          })
        }),
        new AddAssetHtmlPlugin({
          // dll文件位置
          filepath: path.resolve(__dirname, './public/vendor/*.js'),
          // dll 引用路径
          // publicPath: process.env.VUE_APP_PUBLIC_PATH ? process.env.VUE_APP_PUBLIC_PATH + 'vendor' : '/vendor',
          publicPath: './vendor',
          // dll最终输出的目录
          outputPath: './vendor'
        })
      ]
    }
  },

package.json 增加操作命令：

"dll": "webpack -p --progress --config ./webpack.dll.config.js",

如果，每次更改了上诉预编译的文件，需要重新执行 npm run dll ,并且更新到运行环境上

其他还有像， 优化loader就是缩小范围、happypack多线程打包毕竟node 是单线程的、升级webpack毕竟越高级处理的东东越多、通过别名映射文件路径毕竟webpack可以更快找到文件等等