vue/cli3 如何通过DllPlugin打包第三方库

前言

项目引入的的第三方库体积日益庞大，随之打包花费的时间也越来越长。为了良好的开发体验（运维、测试总爱叨逼叨），我们决定针对项目打包做一些优化。

1.编写 webpack.dll.config.js

我们在node_modules同级文件夹下新建一个build文件夹，用来存放我们打包dll的webpack配置文件。webpack.dll.config.js的结构并不复杂，如下所示

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: {
    // 打包入口 'vendors'会作为生成的dll文件名称的[name]部分
    vendors: [
      'xlsx',
      'axios',
      'lodash',
      'echarts',
      'echarts-liquidfill',
    ]
  },
  // filename 输出文件的全称
  //path     文件输出路径
  //library  输出文件导出的资源名称 
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname, '.'),
    library: '[name]_lib'
  },
  //DllPlugin会生成一个manifest.json文件（名字可以是别的）
  //path   manifest.json 文件的输出路径
  //name   manifest.json 文件中name字段的值，需与上面library字段值保持一致
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'manifest.json'),
      name: '[name]_lib'
    }),
  ],
  //生产模式下，webpack会默认对js文件做Tree-shaking优化
  mode:'production'
}

引用的webpack插件需要在本地进行安装，执行cnpm install webpack@4.3.0 -D。

2.配置 vue.config.js

这里额外引入addAssetHtmlPlugin插件，它用来将我们打包好的dll静态文件自动添加到html中。执行cnpm install add-asset-html-webpack-plugin -D安装该插件。并在vue.config.js文件中额外编写以下部分

 const addAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 
 module.exports = {
  publicPath:'./'
  configureWebpack: {
    plugins:[
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./build/manifest.json')
      }),
      new addAssetHtmlPlugin({
        // dll文件位置
        filepath: path.resolve(__dirname, './build/vendors.dll.js'),
        // dll 引用路径
        publicPath: publicPath,
        // dll最终输出的目录
        outputPath: publicPath
      })
    ]
  },
 }

有小伙伴会好奇DllReferencePlugin这个插件是干嘛用的呢，实际上它会引入DllPlugin生成的manifest.json文件，webpack根据该文件的解析结果，打包时会忽略webpack.dll.config.js文件打包入口中配置的第三方库。

3.结语

dll动态链接库的配置并不复杂，但是动手写起来还是会有不少收获，希望这篇文章能帮到有需要的人。