Webpack 中 DllPlugin 的使用方法-FunTeaLearn Online Web Tutorials

在现代 Web 开发中，前端工程化已经成为了必要的技能。Webpack 作为当今最受欢迎的前端工程化构建工具，具备实现模块化、打包、压缩等功能。其中， DllPlugin 是 Webpack 中很重要的插件，它可以将一些基本不会变动的代码提前打包，减小每次打包体积，提升了构建速度。

本文将介绍什么是 DllPlugin，如何使用以及示例代码，帮助开发者尽快掌握该插件的使用方法。

什么是 DllPlugin

DllPlugin 是 Webpack 中的一个插件，可以将一些基本不会变动的代码提前打包，生成动态链接库（Dynamic Link Libraries），缩短了第二次构建的时间。其原理是先打包出一个包含业务不常变更的代码块的 dll 文件，然后在后续的构建中，直接引入这个 dll 文件，不需要再去打包这一块的代码，从而减小了构建时间，提升了构建速度。

如何使用

1. 安装依赖

在使用 DllPlugin 之前，需要先安装依赖：

npm i -D webpack webpack-cli webpack-dev-server add-asset-html-webpack-plugin clean-webpack-plugin

2. 配置 webpack.config.js 文件

在 webpack.config.js 配置文件中，需要新增两个配置文件：一个是 DllPlugin 的配置文件，另一个是使用 DllReferencePlugin 引入打包好的 dll 文件。

DllPlugin 配置文件

在 webpack.config.js 配置文件中，新增如下代码：

-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------

-- -- --- ------------
----- ------ - -
  --------
  ------------
  ---------
--
-------------- - -
  ----- -------------
  -------- --------------------
  ------ -
    -------
  --
  ------- -
    --------- ----------------
    ----- -------------------- -------
    -------- ----------------
  --
  -------- -
    --- -------------------
      -------- ----------
      ----- ----------------
      ----- -------------------- ------ ------------------------
    ---
  --
  ------------- -
    --------- -----
  --
--

其中， vendor 是 dll 文件的入口文件。library 用于生成全局变量，将所有导出的内容赋值给这个全局变量。

DllReferencePlugin 引入打包好的 dll 文件

在 webpack.config.js 配置文件中，新增如下代码：

-- -------------------- ---- -------
----- ------------------ - -----------------------------------------

-------------- - -
  -----
  ------ --
    -----
    ----- -------------------- --------
  --
  -------- -
    -----
    --- ----------------------------
      -------- ----------
      --------- --------------------------------------
    ---
    --- --------------------
      --------- ----------------------- ------------------
      ----------- ------
      ----------- ------
    ---
  --
-

其中，DllReferencePlugin 用于动态链接 dll 文件；AddAssetHtmlPlugin 插件则会将生成的 dll 文件自动插入到 index.html 中。

3. 创建 package.json 脚本

在 package.json 中，新增脚本：

"scripts": {
  "build-vendor": "webpack --config webpack.vendor.config.js",
  "dev": "webpack-dev-server --open --config webpack.config.js",
  "build": "webpack --config webpack.config.js",
},

4. 执行命令

npm run build-vendor # 打包生成 vendor.dll.js 和 vendor.manifest.json 文件
npm run dev # 启动项目

使用 DllPlugin 及打包出来的 vendor 文件后，我们便可以在业务代码中直接引入打包好的 vendor 文件，从而减小打包体积，提升构建速度。

示例代码

在本文中，我们共介绍了什么是 DllPlugin，如何使用，以及示例代码的使用方法。希望本文能够对大家学习 Webpack 的同时，也可以帮助大家更好地理解和掌握 DllPlugin 插件的使用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/677ff531ce7f4861252644ab

Webpack 中 DllPlugin 的使用方法