写作不易，未经作者允许禁止以任何形式转载！
如果觉得文章不错，欢迎关注、点赞和分享！

[打包优化]Webpack DLL (juejin.cn)

认识 DLL 库

什么是 DLL
- DLL 全称是动态链接库(Dynamic Link Library)，是为软件在 Windows 中实现共享函数库的一种实现方式;
- 那么 webpack 中也有内置 DLL 的功能，它指的是可以将可以共享，并且不经常改变的代码，抽取成一个共享的库;
- 这个库在之后编译的过程中，会被引入到其他项目的代码中，减少的打包的时间;
DDL 库的使用分为两步:
- 第一步:打包一个 DLL 库;
- 第二步:项目中引入 DLL 库

DLL 打包

webpack 内置 DllPlugin 帮助生成 DLL 文件

webpack.common.js
- context：执行上下文，
- entry：
  - key：name（placeholder）
  - value：要打包的包名
- output（常规）
- plugins
  - DllPlugin
    - name：定义生成 dll 文件的名称
    - path：生成 dll 文件的文件路径

const path = require('path');
const { DllPlugin } = require('webpack');
const { merge } = require('webpack-merge');

const commonConfig = (isProduction) => {
  return {
    context: path.resolve(__dirname, '../'),
    entry: {
      react: ['react', 'react-dom'],
    },
    output: {
      path: path.resolve(__dirname, '../dll'),
      filename: 'dll_[name].js',
      library: 'dll_[name]',
    },
    plugins: [
      new DllPlugin({
        name: '[name].manifest.json',
        path: path.resolve(__dirname, '../dll/[name].manifest.json'),
      }),
    ],
  };
};
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod');

module.exports = function (env) {
  const isProduction = env.production;
  process.env.NODE_ENV = isProduction ? 'production' : 'development';

  const config = isProduction ? prodConfig : devConfig;
  return merge(commonConfig(isProduction), config);
};

打包完成后，在根目录下会有一个 dll 文件夹，内有 Dll 文件和相应 manifest.json 文件。

DLL 使用

如果我们的代码中使用了 react、react-dom，有配置 splitChunks 的情况下，他们会进行分包，打包到一个独立的 chunk 中。
- 但是现在有了 dll_react，不再需要单独去打包它们，可以直接去引用 dll_react 即可:
- 第一步:通过 DllReferencePlugin 插件告知要使用的 DLL 库;
- 第二步:通过 AddAssetHtmlPlugin 插件，将打包的 DLL 库引入到 Html 模块中;

new DllReferencePlugin({
  context: path.resolve(__dirname, '../'),
  manifest: path.resolve(__dirname, '../dll/react.manifest.json'),
}),
  new AddAssetHtmlWebpackPlugin({
    outputPath: '../build/js',
    filepath: path.resolve(__dirname, '../dll/dll_react.js'),
  });