webpack5 DLLPlugin

DLLPlugin动态连接库，可以提升开发环境代码的编译速度

为什么使用：

        1. 前端框架Vue、React体积大，构建慢

        2. 比较稳定，基本不会升级版本

        3. 同一个版本之构建一次，不会每次都重新构建

        4. 并且webpack已经内置支持了DLLPlugin

一、DLLPlugin打包出dll文件（比如react预打包）

创建webpack.dll.js文件

/* eslint-disable */
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
const distPath = path.join(__dirname, '..', 'dist')

module.exports = {
  mode: 'development',
  // JS 执行入口文件
  entry: {
    // 把 React 相关模块的放到一个单独的动态链接库
    react: ['react', 'react-dom']
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    // 也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: distPath,
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(distPath, '[name].manifest.json'),
    }),
  ],
}

在package.json中添加命令

{
  // ...

  "scripts": {
    // ...
    "dll": "webpack --config build/webpack.dll.js"
  },
  // ...
}

在终端运行npm run dll， 生成mainfest.json文件和dll.js文件

二、使用dll文件

配置开发环境

// webpack.dev.js

const distPath = path.join(__dirname, '..', 'dist')
// 第一，引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = merge(webpackCommonConf, {
    // ...

    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/ // 第二，不要再转换 node_modules 的代码
            },
        ]
    },
    plugins: [
        // ...

        // 第三，告诉 Webpack 使用了哪些动态链接库
        new DllReferencePlugin({
            // 描述 react 动态链接库的文件内容
            manifest: require(path.join(distPath, 'react.manifest.json')),
        }),
    ],
    
    // ...
})