前言
Webpack 是一个非常流行的前端构建工具，可以将多个 JS、CSS、图片等资源打包成一个或多个文件，方便在浏览器中加载。但是随着项目变得越来越大，Webpack 的构建速度也变得越来越慢，这给开发者带来了很大的困扰。为了解决这个问题，Webpack 提供了一个叫做 DllPlugin 的插件，可以将一些不经常变化的模块预先打包成一个独立的文件，这样在后续的构建过程中就可以直接使用这个文件，从而提高构建速度。
DllPlugin 是什么？
DllPlugin 是 Webpack 自带的一个插件，用于将一些模块预先打包成一个独立的文件，这个文件被称为 Dll 文件。当我们需要构建项目时，可以直接引用这个 Dll 文件，从而避免重复打包已经打包过的模块，提高构建速度。
如何使用 DllPlugin？
使用 DllPlugin 需要分为两个步骤：
第一步：创建一个 Dll 文件
我们需要创建一个单独的 Webpack 配置文件，用于打包我们需要预先打包的模块。这个配置文件可以命名为 webpack.dll.config.js，示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
-- ---------
------ --------- -------------
------- -----------
--
------- -
----- ----------------------- --------
--------- ----------------
-------- -------------
--
-------- -
--- -------------------
----- -------------
----- ----------------------- -----------------------------
---
--
--上面的代码中，我们通过 entry 属性指定了需要预先打包的模块，这里我们以 React 和 Lodash 为例。output 属性指定了打包后的文件名和路径，library 属性指定了打包后生成的 Dll 文件中的变量名，这个变量名在后续的项目中会用到。plugins 属性使用了 DllPlugin 插件，这里我们指定了生成的 manifest 文件的路径和文件名。
我们可以通过运行下面的命令来打包这个配置文件：
webpack --config webpack.dll.config.js
打包完成后，会在 dist 目录下生成两个文件：react.dll.js 和 lodash.dll.js，以及两个 manifest 文件：react.manifest.json 和 lodash.manifest.json。
第二步：在项目中引用 Dll 文件
我们需要在我们的项目中引用这些 Dll 文件，以便在后续的构建过程中直接使用这些文件，而不需要重新打包这些模块。我们可以通过在项目的 Webpack 配置文件中使用 DllReferencePlugin 插件来实现这一点。示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- ----------------------------
--------- --------------------------------------
---
--- ----------------------------
--------- ---------------------------------------
---
--
--上面的代码中，我们通过 plugins 属性使用了两个 DllReferencePlugin 插件，分别引用了 react.manifest.json 和 lodash.manifest.json 这两个 manifest 文件。这样在后续的构建过程中，Webpack 就会直接使用这些 Dll 文件，而不需要重新打包这些模块，从而提高构建速度。
总结
使用 DllPlugin 可以大大提高 Webpack 的构建速度，特别是在项目变得越来越大的时候。但是需要注意的是，Dll 文件中的模块需要经常更新，否则可能会出现一些奇怪的问题。如果你的项目中有很多不经常更新的模块，可以考虑使用 DllPlugin 来提高构建速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fcec16d10417a2228479fb