如何在 Webpack 中使用 DllPlugin 提高打包速度？

前端开发中，打包速度一直是一个非常重要的问题。Webpack 是目前最流行的打包工具之一，但是在项目变得越来越大的时候，打包速度就可能变得非常缓慢。为了解决这个问题，Webpack 提供了一个叫做 DllPlugin 的插件，可以在一定程度上提高打包速度。

什么是 DllPlugin？

DllPlugin 是 Webpack 提供的一个插件，可以将一些代码提前打包成动态链接库（DLL），并在后续的打包过程中引用这些 DLL，从而提高打包速度。具体来说，DllPlugin 会将一些不经常变动的第三方库（如 React、Vue、jQuery 等）打包成 DLL 文件，然后在每次打包时，直接引用这些 DLL 文件，而不需要重新打包这些库，从而提高打包速度。

如何使用 DllPlugin？

使用 DllPlugin 需要分为两个步骤：

第一步：打包 DLL 文件

首先，需要在 webpack.config.js 中添加一个单独的配置文件，用于打包 DLL 文件：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'lodash'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]_library',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.resolve(__dirname, 'dist/[name]-manifest.json'),
    }),
  ],
};

上面的代码中，我们定义了一个 entry，将 React、React-DOM 和 Lodash 三个库打包成一个 DLL 文件，输出到 dist 文件夹下，并将输出的 DLL 文件名设置为 vendor.dll.js，同时将打包后的库命名为 vendor_library。在 plugins 中，我们使用了 DllPlugin 插件，将 vendor_library 和 vendor.dll.js 关联在一起，并将打包后的信息输出到 dist/vendor-manifest.json 文件中。

然后，使用 webpack 命令打包 DLL 文件：

webpack --config webpack.dll.config.js

打包完成后，会在 dist 文件夹下生成 vendor.dll.js 和 vendor-manifest.json 两个文件。

第二步：在应用程序中引用 DLL 文件

接下来，需要在应用程序的 webpack.config.js 中引用刚刚打包好的 DLL 文件：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor-manifest.json'),
    }),
  ],
};

上面的代码中，我们在 plugins 中使用了 DllReferencePlugin 插件，引用了 dist/vendor-manifest.json 文件。这样，在打包应用程序的时候，Webpack 就会自动从 DLL 中引用 React、React-DOM 和 Lodash 三个库，而不需要重新打包这些库，从而提高打包速度。

总结

使用 DllPlugin 可以有效提高 Webpack 的打包速度，特别是在项目变得越来越大的时候。需要注意的是，使用 DllPlugin 需要分为两个步骤，首先打包 DLL 文件，然后在应用程序中引用 DLL 文件。同时，需要注意打包 DLL 文件时，只打包那些不经常变动的第三方库，而不是所有的库都打包成 DLL。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510f55e95b1f8cacd9587ad