webpack vue-cli3 DllPlugin 提取公用库加快打包的速度

[wl05]

公司的项目开发到现在2019.12.9已经过去了四个月，项目我一个人开发一个人维护，项目迭代也越来越快，每次上线打包速度也越来越慢，是时候想办法优化一下打包速度了，免得每次都要等那么久。这次优化想到是把项目中安装的第三方模块提取出来，进行预编译，这样下次打包的时候就不用再去打包了。用到的插件DllPlugin、DllReferencePlugin

1. 安装

npm i clean-webpack-plugin webpack-cli add-asset-html-webpack-plugin --dev

2. 我们需要编写配置文件 webpack.dll.conf.js
   在项目的根目录下创建 webpack.dll.conf.js，加入如下内容

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// dll文件存放的目录
const dllPath = 'public/vendor'

module.exports = {
  entry: {
    // 需要提取的库文件
    // 这里像vue,vue-router 这些库我项目中打包的时候用的cdn插入方式，这里就没有放进来了。
    vendor: [
      'echarts',
      'path-to-regexp',
      'register-service-worker',
      'vue-class-component',
      'vue-property-decorator',
      'vuex-class',
      'vuex-module-decorators'
    ]
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name].dll.js',
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: '[name]_[hash]'
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持与 output.library 中名称一致
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}

3. 生成dll文件
   在package.json配置命令

"scripts": {
    ...
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},

npm run dll

4. 接下来配置vue.config.js
   到目前为止我们只是把公共库打包提取出来了，还没有真正和我们的代码关联起来，我们需要告诉webpack哪些库已经编译好了，不需要再编译直接引用就可以了，

const webpack = require('webpack')

module.exports = {
    ...
    configureWebpack: {
        plugins: [
          new webpack.DllReferencePlugin({
            context: process.cwd(),
            manifest: require('./public/vendor/vendor-manifest.json')
          })
        ]
    }
}

5. 引入dll文件
   dll 文件已经生成，在vue.config.js 我们通过DllReferencePlugin忽略了已经打包过的库，所以我们需要在打包完后引入dll 文件，这里我们通过add-asset-html-webpack-plugin来做这件事情

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

module.exports = {
    ...
    configureWebpack: {
        plugins: [
          new webpack.DllReferencePlugin({
            context: process.cwd(),
            manifest: require('./public/vendor/vendor-manifest.json')
          }),
          // 将 dll 注入到 生成的 html 模板中
          new AddAssetHtmlPlugin({
            // dll文件位置
            filepath: path.resolve(__dirname, './public/vendor/*.js'),
            // dll 引用路径
            publicPath: './vendor',
            // dll最终输出的目录
            outputPath: './vendor'
          })
        ]
    }
}

参考资料

1. vue-cli3 DllPlugin 提取公用库
   
2. 深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)