在前端开发中，Web 项目通常会有大量的依赖模块，这些依赖模块会被打包成一个文件，随着项目的复杂度和代码量的增大，打包时间也会变得越来越长，给开发和调试带来不便。Webpack 提供的 DllPlugin 可以帮助我们对常用的依赖模块进行单独打包，提升打包速度，本文就介绍一下如何使用 DllPlugin 进行性能优化。
DllPlugin 简介
DllPlugin 是 Webpack 的一个插件，通过将一些常用的依赖模块单独打包成一个动态链接库（Dynamic Link Library，简称 DLL），然后缓存在内存中，其他模块在打包时可以直接引用该 DLL，避免了重复打包和编译的过程，从而提升了打包速度。
当我们运行 Webpack 时，会自动把 DllPlugin 中定义的库和对应的映射关系，注入到 webpack 打包的入口文件中。在打包时，通过引入这些库中已经预先编译过的代码，可以节省打包时间，提高构建速度。
DllPlugin 使用流程
使用 DllPlugin 进行性能优化的流程大致分为以下几步：
- 创建项目
在开始使用 DllPlugin 之前，需要先创建一个 Webpack 项目，并安装 Webpack 和 DllPlugin 插件。
- 定义 DllPlugin 配置项
在项目中的 webpack.config.js 中，定义 DllPlugin 配置项，例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------ --------- -------------
------- ----------
--
------- -
----- ----------------------- -------
--------- ----------------
-------- ------------ -- ----- ------------------ -- ---- --
--
-------- -
--- -------------------
----- -------------
----- ----------------------- ---------------------------
--
-
--这里的 entry 中定义了两个入口，react 和 lodash，本文以 react 为例，后面的操作基本相同。output 配置中，path 需要指定为打包出来的 DLL 存放的目录，filename 指定打包出来的 DLL 文件名；library 是 DLL 暴露出来的对象名，后面在使用 DllReferencePlugin 时需要用到。
- 打包 DllPlugin 库文件
配置好了 DllPlugin 的选项后，需要单独进行一次打包，命令行输入：
webpack --config webpack.config.dll.js
这里的 webpack.config.dll.js 即是上面定义好的 DllPlugin 配置文件。
执行完这个打包命令后，在目录下会生成 react.dll.js 和 react.manifest.json 两个文件，这就是 DllPlugin 打包出的库文件。
- 使用 DllReferencePlugin 引用打包好的库
在我们的 Webpack 项目中，在配置文件中使用 DllReferencePlugin 插件引用打包好的库文件。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
----- ----------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- ----------------------------
-------- ---------- -- --- --------- -- ------- --
--------- ------------------------------------ -- --- -------- --
--
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--在上面代码中，我们使用 new webpack.DllReferencePlugin 插件引用了 react.dll.js 的 manifest 文件，这个 manifest 文件中包含了 react.dll.js 中输出的各个模块和相应的 id 映射关系。当 Webpack 进行打包时，通过这个映射关系，就可以直接引用打包好的库了。
现在再次进行打包，就可以发现打包速度比之前明显提高了。
总结
通过使用 Webpack 的 DllPlugin 插件，我们可以将一些常用的依赖模块单独打包成一个 DLL 库，在后续的打包中避免了重复打包和编译的过程，从而提升了打包速度。在实际项目中，可以根据自己的需求，选择一些常用的依赖模块进行单独打包，以达到更好的性能优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d5885eb5eee0b525d47220