什么是 DllPlugin？
Webpack 是一个功能强大的模块化打包工具，在前端开发中得到了广泛的应用。然而，Webpack 在运行时需要将模块打包成一个或多个 JavaScript 文件，而这个过程会消耗大量时间和资源。
在项目越来越大的情况下，Webpack 打包的速度和性能问题就变得日益突出。这时候，我们可以使用 Webpack 的 DllPlugin 插件来优化构建速度和性能。
DllPlugin 可以将一些常用的、稳定的第三方库和框架单独打包成一个个的动态链接库（Dynamic Link Library，缩写为 DLL），然后在每次运行 Webpack 打包时，只需要加载这些 DLL，就可以避免重复打包，从而大大缩减了构建时间。
DllPlugin 的实践技巧
1. 创建 Dll 库
首先，我们需要将常用的第三方库和框架单独打包成一个个的 DLL，可以通过以下步骤来实现：
创建一个新的 Webpack 配置文件，例如
webpack.config.dll.js。在该配置文件中，指定需要打包的库和框架，并把它们输出成一个 DLL：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
-------- --------- ------------ ----------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- -------------------- ------- ------------------------
---
--
--在上面的配置中，我们需要指定需要打包的库和框架，这里我们打包了 React、React-DOM 和 Lodash 三个库。
注意，这里的 entry.library 就是用来指定需要打包的库和框架的，它的值是一个数组，可以添加任意多个库和框架。
然后，我们需要将这些库和框架输出成一个 DLL 文件，这里需要指定输出文件的名称（这里是 [name].dll.js）和目录路径（这里是 path.resolve(__dirname, 'dist')）。
同时，我们还需要指定一个全局变量 library，用来在运行时访问这些库和框架。
最后，我们使用 DllPlugin 插件来生成一个 manifest.json 文件，其中包含了这些库和框架的元信息。
2. 在主要 Webpack 配置文件中引用 DLL
通过上一步，我们已经创建了一个 DLL 文件，下一步是将这个 DLL 文件引入到主要的 Webpack 配置文件中，让 Webpack 在打包时可以直接从 DLL 中加载所需的库和框架。
在主要 Webpack 配置文件中，需要添加以下代码来引入 DLL 文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ----------------------------
-------- ----------
--------- ----------------------------------------
---
--
--在上面的配置中，我们使用 DllReferencePlugin 插件来引入一个或多个 DLL 文件。
其中，context 是指定当前的上下文路径，manifest 是要引用的 DLL 包含的元信息，这里我们引入了之前创建的 library DLL。
3. 运行 Webpack 打包
最后，我们只需要在命令行中运行 Webpack，就可以看到 Webpack 会直接从 DLL 中读取需要的库和框架，而不需要重复打包。
webpack --config webpack.config.js
效果对比
以下是一个使用 DllPlugin 插件进行优化的 Webpack 打包时间对比绩效：
| 项目 | 打包时间（未使用 DllPlugin） | 打包时间（使用 DllPlugin） |
|---|---|---|
| 示例项目 | 30s | 4s |
可以看出，在使用 DllPlugin 之后，打包时间有了显著的改善。
总结
通过 DllPlugin 插件，我们可以将常用的第三方库和框架单独打包成 DLL，然后在主要的 Webpack 配置文件中引入这些 DLL，从而加速 Webpack 打包的速度和性能。
通过以上的实践技巧，我们可以更好地了解和应用 DllPlugin 插件，优化 Webpack 构建过程，提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f53dc0f6b2d6eab3dee358