在前端开发中，使用 Webpack 打包是必不可少的步骤。然而，随着项目的复杂度提高和代码量不断增加，Webpack 的打包速度也会变得越来越慢，给开发和构建带来了很多困扰。为了解决这个问题，我们可以优化 Webpack 的性能。本文将介绍 Webpack 性能优化中的 DllPlugin 实现。
DllPlugin 是什么？
DllPlugin 是 Webpack 的一个插件，它可以将一些比较稳定的代码提前打包，生成一个单独的动态链接库文件（也称为 manifest.json），供后续的打包使用。这样就可以将某些不经常变动的第三方库或框架等代码提前打包，并且可以减少打包过程中重复的代码，从而提高构建速度。
DllPlugin 实现步骤
第一步：创建一个配置文件
在项目根目录下新建一个名为 webpack.dll.config.js 的配置文件，用来配置需要打包的第三方库或框架等代码。具体配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------- -----------
------- -----------
--
------- -
--------- ----------------
----- ----------------------- -----------------
-------- ------------
--
-------- -
--- -------------------
----- -------------
----- ----------------------- -------------------------------------
--
--
--mode配置项用来指定打包模式，此处设置为 production，表示生产环境。entry配置项用来指定要打包的第三方库或框架等代码，这里以 lodash 和 jquery 为例。output配置项用来指定生成的动态链接库文件的文件名、存放路径和变量名。plugins配置项用来指定使用的插件，这里我们使用 Webpack 自带的 DllPlugin 插件。其中name用来指定动态链接库文件的变量名，path用来指定生成的 manifest.json 文件的路径和文件名。
第二步：打包生成动态链接库文件
在命令行中运行以下命令进行打包：
webpack --config webpack.dll.config.js
执行成功后，在 public/dll 目录下生成了 lodash.dll.js 和 jquery.dll.js 两个动态链接库文件，以及对应的 manifest.json 文件。
第三步：配置 webpack 配置文件
在 Webpack 的主配置文件中，需要引入 DllReferencePlugin 插件，并指定动态链接库文件的路径和变量名。具体配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- ------------------
--
-------- -
--- ----------------------------
--------- ------------------------------- ---------------------------------------
---
--- ----------------------------
--------- ------------------------------- ---------------------------------------
---
--
--mode配置项用来指定打包模式，此处设置为 production，表示生产环境。entry配置项用来指定入口文件。output配置项用来指定打包后的输出路径和文件名。plugins配置项用来指定使用的插件，这里我们使用 Webpack 自带的 DllReferencePlugin 插件。其中manifest用来指定 manifest.json 文件的路径和文件名。
DllPlugin 的优缺点
优点
- 提高打包速度：将稳定不变的代码提前打包，减少了重复的打包过程，可以提高打包速度。
- 减少代码冗余：每次打包时只需打包变动的代码，减少了代码冗余，可以减小打包文件的体积。
- 更好的缓存处理：将第三方库或框架等代码提前打包，可以减少打包文件的变化，从而更容易地利用浏览器的缓存机制。
缺点
- 需要额外的配置文件：需要额外创建一个配置文件来指定需要打包的代码。
- 不容易更新：如果需要更新动态链接库文件，必须重新打包，否则会导致代码不匹配的问题。同时，在多个项目中使用相同的动态链接库文件也会需要重新打包，不太灵活。
示例代码
本文示例代码已上传到 GitHub：https://github.com/moyufed/webpack-dll-example
总结
通过使用 Webpack 的 DllPlugin 应用，在一定程度上可以提高 Webpack 的打包速度，并减少打包后的代码冗余。但是需要注意动态链接库文件的更新和使用的灵活性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648f661448841e9894da9a46