webpack v5升级之 DllPlugin|DllReferencePlugin

1、序

最近对前端框架依赖webpack 进行升级，遇到了一点点坑和大家分享一下

2、DllPlugin 和 DllReferencePlugin

这对插件是进行项目优化的常用方案，其主要方式是 DllPlugin 将常用且不会轻易进行更改的依赖包进行抽离单独打包；DllReferencePlugin 将打包输出的内容 映射关系放置到项目中，在打包的时候，忽略这些文件（有点点像 externals，不过 externals 映射的文件来源，可以作为DllPlugin 的输入 ）

// package.json  使用框架为vueCli5.x
//...
"scripts": {
     "dll": "webpack --config=webpack.dll.config.js ", // 不使用等号可以用空格代替，看习惯
     "dev":  "npm run  dll && vue-cli-service serve", // 不期望每次运行构建dll可以单独分离
     "build": "npm run  dll && vue-cli-service build"  // 打包的时候，必须构建；当已经构建好后，打包体积会减小（毕竟抽离的大部分内容）
}

// webpack.dll.config.js 这个命名可以随意取用，和package.json dll脚本指向同一位置即可
const webpack = require('webpack');

module.exports = {
  entry: {
   // 可以放置多个
    vendors: ['vue', 'vue-i18n','axios'],  // 放置你需要抽离的依赖
    // vendors2: ['qiankun']
  },
  output: {
    path: path.join(__dirname, 'dll'), // 存放动态链接库的目录
    filename: '[name].dll.js',       // 动态链接库的名称，如'vendors.dll.js'
    library: '[name]_library',       // 动态链接库输出的文件名
  },
  plugins: [
    // dll输出文件*.manifest.json *.js
    new webpack.DllPlugin({
      name: '[name]_[hash]',        // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      path: path.join(__dirname, 'dll', '[name].manifest.json'),     // 描述动态链接库文件的 manifest.json 文件输出时的文件名称(路径)
      context: __dirname, // 根据实际路径自己配置
      entryOnly: false // 此乃神坑
    }),
  ],
};

// vue.config.js 
// DllReferencePlugin 使用
...
// dll 优化： 要忽略编译的模块
        config.plugins.push(
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: path.join(__dirname, 'dll', 'vendors.manifest.json'),  // 只需要这个映射json即可
            })
          // 可以配置多个
          // new webpack.DllReferencePlugin({
          //      context: __dirname,
          //      manifest: path.join(__dirname, 'dll', 'vendors2.manifest.json'),  // 只需要这个映射json即可
          //  })
        );
...

3、被更改的默认配置 -- DllPlugin options entryOnly （解密时间）

在webpack v4 中 entryOnly 默认值为true; 在v5 中默认值为false; 在官方升级文档中也有一句话的描述(图一所示):

图一.png

entryOnly 代表的含义是什么呢？这里是官方DllPlugin说明（图二所示）:表示是否仅仅暴露入口；总所周知，引用一个文件，其本身还会有其他引入；这个文件，就是入口；好家伙，这么重要的一个参数，居然被改动了，还如此轻描淡写；

图二.png

4、被忽略的tree-shaking

tree-shaking 算是webpack v5 的重大更新，将其作为默认优化（entryOnly 默认为true 便于dll的tree-shaking）也是无可厚非; 但是，在框架升级中，因为各种各样的原因，我们会遇到各种品次的第三方库，其会提供各类不同的能力，甚至一些也不支持tree-shaking；这个属性，需要entryOnly：false; 需要加在升级的DllPlugin options 中；

以上，希望大家能有愉快的编程体验~