DLLPlugin，Webpack 构建速度优化秘籍

2023-09-26 22:15:43

前言

在前端开发中，我们经常需要构建项目，以便在生产环境中运行。随着项目规模的不断扩大，构建时间也变得越来越长。为了解决这个问题，我们可以使用 Webpack 的 DllPlugin 插件来优化项目构建速度。

DllPlugin 原理

DllPlugin 插件的工作原理很简单，它会将包含大量复用模块且不会频繁更新的库文件进行编译，只需要编译一次，编译完成后存在指定的文件中。当我们下次构建项目时，可以直接使用这个已经编译好的库文件，而不需要再次编译，从而可以大大缩短构建时间。

DllPlugin 使用

1. 安装 DllPlugin

首先，我们需要安装 DllPlugin 插件。我们可以使用 npm 来安装：

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

2. 创建 dll 配置文件

接下来，我们需要创建一个 dll 配置文件。这个文件可以是任何名称，但通常我们会将其命名为 webpack.dll.config.js。在这个文件中，我们需要指定要编译的库文件列表：

const path = require('path');

module.exports = {
  entry: {
    dll: ['jquery', 'lodash', 'moment']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]'
  }
};

在上面的代码中，我们指定了三个库文件：jquery、lodash 和 moment。这些库文件将被编译成一个名为 dll.dll.js 的文件。

3. 运行 DllPlugin

创建好 dll 配置文件后，我们需要运行 DllPlugin 插件。我们可以使用以下命令来运行：

webpack --config webpack.dll.config.js

运行完成后，将在 dist 目录下生成一个 dll.dll.js 文件。

4. 在项目中使用 DllPlugin

在项目中使用 DllPlugin 很简单，只需要在项目的主配置文件中添加以下代码：

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

module.exports = {
  plugins: [
    new DllPlugin({
      path: path.resolve(__dirname, 'dist', 'dll.dll.js'),
      name: '[name]'
    })
  ]
};

在上面的代码中，我们指定了 dll.dll.js 文件的路径和名称。这样，当我们构建项目时，Webpack 就会自动加载这个文件，从而可以大大缩短构建时间。

AddAssetHtmlPlugin

除了使用 DllPlugin 插件外，我们还可以使用 AddAssetHtmlPlugin 插件来进一步优化项目构建速度。AddAssetHtmlPlugin 插件可以将构建好的 JS 文件插入到 html 页面中，这样就可以避免在页面中引入额外的 JS 文件，从而可以减少 HTTP 请求的数量，从而可以加快页面的加载速度。

1. 安装 AddAssetHtmlPlugin

首先，我们需要安装 AddAssetHtmlPlugin 插件。我们可以使用 npm 来安装：

npm install add-asset-html-plugin --save-dev

2. 使用 AddAssetHtmlPlugin

创建好 dll 配置文件后，我们需要运行 DllPlugin 插件。我们可以使用以下命令来运行：

const AddAssetHtmlPlugin = require('add-asset-html-plugin');

module.exports = {
  plugins: [
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, 'dist', 'dll.dll.js')
    })
  ]
};

在上面的代码中，我们指定了 dll.dll.js 文件的路径。这样，当我们构建项目时，Webpack 就会自动将这个文件插入到 html 页面中。