在前端开发中，打包构建是必不可少的一环。通常我们会使用 webpack 工具进行构建。但是，当项目逐渐变得复杂时，webpack 的构建时间也会变得越来越长。为了解决这个问题，我们可以使用 webpack 的 DLLPlugin，将一些不需要经常变化的模块单独打包成一个独立的动态链路库文件，提高打包构建的速度。
@alicloud/console-toolkit-plugin-dll 是阿里云控制台工具包提供的一个 webpack 插件，用于生成 DLLPlugin 的配置文件，可以大幅度减少 DLLPlugin 配置的繁琐度。
本文将详细介绍如何使用 @alicloud/console-toolkit-plugin-dll 插件，以及其在加速项目打包速度方面的作用。
安装
npm i -D @alicloud/console-toolkit-plugin-dll
配置
在使用 @alicloud/console-toolkit-plugin-dll 前，需要在项目的 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- -------------------- - -----------------------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------------------
----- ----------------------- -------
--
-------- -
-- ------------------------- --- --- ------ ----
--- ----------------------
-- ----------------
----- -------
-- ----- -------
------ -
--------
------------
--------
-
---
--- ----------------------------
--------- ----------------------- -----------------------
--
-
-在上面的配置中，我们引入了 ConsoleToolkitPlugin 和 webpack 的 DllReferencePlugin 插件。
在 ConsoleToolkitPlugin 中，我们需要传入 name 和 entry 两个参数。其中，name 表示在阿里云控制台中配置的前端项目名，entry 表示需要生成 DLLPlugin 的模块列表。
在 webpack 的 DllReferencePlugin 中，需要传入 manifest 文件的路径，需要保证该路径和生成的 DLLPlugin 文件路径一致。
使用
执行 npx build dll 命令，将会在项目的 public/dll 目录下生成一个名为 [name].js 的动态链路库文件和一个名为 [name].json 的 manifest 文件。
然后，在执行项目打包构建之前，需要加载该动态链路库文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
---- ---------------
------- ----------------------------
-------
-------示例代码
完整示例代码可以查看 https://github.com/aliyun/console-toolkit-plugin-dll-demo。
结论
使用 @alicloud/console-toolkit-plugin-dll 插件可以将手动配置 DLLPlugin 的工作量大幅度减少，并且加速项目打包的速度。但是需要注意，在使用 @alicloud/console-toolkit-plugin-dll 时，需要保证打包的模块列表是不经常变化的，否则会影响到 DLLPlugin 的缓存效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/109935