在前端开发中，webpack 已经成为了必不可少的工具。它可以帮助我们打包、压缩、优化代码等等。但是，在项目变得越来越庞大的时候，webpack 的打包时间也会越来越长，这对开发效率造成了很大的影响。为了解决这个问题，webpack 提供了两个插件：DllPlugin 和 DllReferencePlugin。
DllPlugin
DllPlugin 可以将一些基本不会变化的代码打包成一个单独的文件，这个文件可以在后续的打包过程中被复用，从而减少了打包的时间。这个单独的文件被称为“动态链接库”（Dynamic Linking Library，简称 DLL）。
使用 DllPlugin 的过程分为两个步骤：
首先，需要将一些基本不会变化的代码打包成一个 DLL 文件。这个文件可以包含一些常用的库、框架或者是自己编写的一些基础代码。这个过程只需要执行一次，之后就可以重复使用这个 DLL 文件了。
在后续的打包过程中，需要使用 DllReferencePlugin 来引用这个 DLL 文件。这个插件可以将这个 DLL 文件中的代码注入到最终的打包文件中，从而减少了打包时间。
下面是一个使用 DllPlugin 的示例代码：
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------- --------- ------------ ---------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- --------
--
-------- -
--- -------------------
----- ---------
----- -------------------- ------- --------------
--
-
--这个配置文件会将 react、react-dom 和 lodash 打包成一个名为 vendor.dll.js 的文件，并将这个文件放在 dist 目录下。同时，这个文件会被定义为一个全局变量，名称为 vendor。最后，使用 DllPlugin 插件将这个 DLL 文件的信息输出到 dist 目录下的 vendor.json 文件中。
DllReferencePlugin
DllReferencePlugin 是用来引用 DLL 文件中的代码的。使用 DllReferencePlugin 的过程也分为两个步骤：
在 webpack 的配置文件中，需要使用 DllReferencePlugin 插件来引用之前生成的 DLL 文件。
在代码中，需要使用 import 或者 require 来引用 DLL 文件中的代码。
下面是一个使用 DllReferencePlugin 的示例代码：
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- ----------------------------
-------- ----------
--------- -----------------------------
--
-
--这个配置文件会将 src 目录下的 index.js 文件打包成 dist 目录下的 bundle.js 文件，并使用 DllReferencePlugin 插件引用之前生成的 vendor.dll.js 文件。在代码中，可以使用 import 或者 require 来引用 vendor.dll.js 文件中的代码。
总结
使用 DllPlugin 和 DllReferencePlugin 可以大大减少 webpack 的打包时间，提高开发效率。但是，使用这两个插件也需要注意一些问题：
DLL 文件中的代码必须是基本不会变化的，如果 DLL 文件中的代码发生变化，需要重新生成 DLL 文件。
DLL 文件中的代码必须是可以被复用的，如果 DLL 文件中的代码只被使用了一次，那么使用 DllPlugin 和 DllReferencePlugin 的效果就会变得很小。
在使用 DllReferencePlugin 的时候，需要注意 DLL 文件的路径和名称是否正确。
以上就是关于 webpack 中 DllPlugin 和 DllReferencePlugin 的详细介绍。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658e5439eb4cecbf2d420bda