前端开发中，打包速度一直是一个非常重要的问题。Webpack 是目前最流行的打包工具之一，但是在项目变得越来越大的时候，打包速度就可能变得非常缓慢。为了解决这个问题，Webpack 提供了一个叫做 DllPlugin 的插件，可以在一定程度上提高打包速度。
什么是 DllPlugin？
DllPlugin 是 Webpack 提供的一个插件，可以将一些代码提前打包成动态链接库（DLL），并在后续的打包过程中引用这些 DLL，从而提高打包速度。具体来说，DllPlugin 会将一些不经常变动的第三方库（如 React、Vue、jQuery 等）打包成 DLL 文件，然后在每次打包时，直接引用这些 DLL 文件，而不需要重新打包这些库，从而提高打包速度。
如何使用 DllPlugin？
使用 DllPlugin 需要分为两个步骤：
第一步：打包 DLL 文件
首先，需要在 webpack.config.js 中添加一个单独的配置文件，用于打包 DLL 文件：
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------- --------- ------------ ----------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- -----------------
--
-------- -
--- -------------------
----- -----------------
----- ----------------------- -----------------------------
---
--
--上面的代码中，我们定义了一个 entry，将 React、React-DOM 和 Lodash 三个库打包成一个 DLL 文件，输出到 dist 文件夹下，并将输出的 DLL 文件名设置为 vendor.dll.js，同时将打包后的库命名为 vendor_library。在 plugins 中，我们使用了 DllPlugin 插件，将 vendor_library 和 vendor.dll.js 关联在一起，并将打包后的信息输出到 dist/vendor-manifest.json 文件中。
然后，使用 webpack 命令打包 DLL 文件：
------- -------- ---------------------
打包完成后，会在 dist 文件夹下生成 vendor.dll.js 和 vendor-manifest.json 两个文件。
第二步：在应用程序中引用 DLL 文件
接下来，需要在应用程序的 webpack.config.js 中引用刚刚打包好的 DLL 文件：
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ----------------------------
--------- ---------------------------------------
---
--
--上面的代码中，我们在 plugins 中使用了 DllReferencePlugin 插件，引用了 dist/vendor-manifest.json 文件。这样，在打包应用程序的时候，Webpack 就会自动从 DLL 中引用 React、React-DOM 和 Lodash 三个库，而不需要重新打包这些库，从而提高打包速度。
总结
使用 DllPlugin 可以有效提高 Webpack 的打包速度，特别是在项目变得越来越大的时候。需要注意的是，使用 DllPlugin 需要分为两个步骤，首先打包 DLL 文件，然后在应用程序中引用 DLL 文件。同时，需要注意打包 DLL 文件时，只打包那些不经常变动的第三方库，而不是所有的库都打包成 DLL。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6510f55e95b1f8cacd9587ad