加速打包！webpack优化秘籍：DLLPlugin动态链接库插件大揭秘

2023-11-21 00:02:37

随着项目中引入的第三方库越来越多，在进行打包时，我们可能会遇到打包速度越来越慢的问题。这是因为 webpack 需要将所有依赖的模块都打包到一个文件中，而第三方库通常体积较大，包含了许多我们可能用不到的功能。

为了解决这个问题，我们可以使用 DLLPlugin 动态链接库插件。DLLPlugin 的原理是将网页依赖的基础模块抽离出来，打包到独立的 dll 文件中。当需要导入的模块存在于某个 dll 中时，该模块不再被打包，而是直接从 dll 中获取。这样可以显著减少打包的时间，从而提升打包速度。

使用 DLLPlugin 的步骤

安装 DLLPlugin

npm install webpack-dll-plugin --save-dev

配置 webpack

在 webpack 配置文件中，添加以下代码：

const webpack = require('webpack');
const DllPlugin = require('webpack-dll-plugin');

module.exports = {
  entry: {
    // 基础模块的入口文件
    vendor: ['jquery', 'lodash', 'react']
  },
  plugins: [
    new DllPlugin({
      // 生成的 dll 文件的名称
      name: 'vendor',
      // dll 文件的输出路径
      path: path.resolve(__dirname, 'dll'),
      // dll 文件的依赖项
      dependencies: ['jquery', 'lodash', 'react']
    })
  ]
};