在前端开发中，有大量的第三方库或工具需要使用，例如 UI 组件库、数据可视化库、语言转换器等，这些库可能会涉及到多个页面或组件的调用。然而，由于每次打包时都需要将它们一起打包对应的文件一起打包，这就会导致构建过程变得笨重且耗时较长。
为了解决这个问题，我们可以使用 Umi-Plugin-Dll 来创建一个动态链接库（Dll），以使特定模块在构建时不需要重新打包，从而加快构建速度。本文将介绍 npm 包 umi-plugin-dll 的使用方法。
什么是 umi-plugin-dll
Umi-Plugin-Dll 是一个 Umi.js 的插件，能够缩短构建时间并提高前端开发效率。使用 umi-plugin-dll 创建一个动态链接库，就能将依赖库从应用程序代码中分离出来。这样，在每次构建时，构建系统不再需要重新构建这些库，而只需要拆分并使用已生成的 Dll。
安装 Umi-Plugin-Dll
在 Umi 项目中安装 umi-plugin-dll，使用以下命令：
$ npm install umi-plugin-dll --save-dev
如何使用 Umi-Plugin-Dll
配置文件
安装了 umi-plugin-dll 后，在项目根目录的 .umirc.js 文件中进行配置，代码如下：
export default {
plugins: [
['umi-plugin-dll', {
exclude: ['babel-runtime'],
include: ['react', 'react-dom'],
}],
],
};exclude表示不需要被打包的包名。include表示需要被打包的包名。
输出 Dll
运行以下命令，将生成 Dll 目录及 Dll 文件。
$ umi dll
命令运行后，可在项目根目录中看到 Dll 目录及 Dll 文件。
引用 Dll
在项目中引用 Dll 十分简单，只需要在 webpack.config.js 配置文件中配置即可：
-- -------------------- ---- -------
-------------- - -
----
-------- -
--- ----------------------------
-------- ----------
--------- -----------------------------------
---
--
--其中，manifest.json 文件是 dllPlugin 生成的描述文件，包含了 dll 模块名和对应的文件路径等内容。
配置
Umi-Plugin-Dll 还提供了以下配置项：
library，库的名称，默认为 manifest.name。path，存放 manifest.json 的绝对路径，默认为dll/${library}-manifest.json。entry，指定需要打包的入口文件。
示例代码
下面是一个 Umi-Plugin-Dll 的示例项目，以 React 为例：
安装 umi-plugin-dll
$ npm install umi umi-plugin-dll --save-dev
在 .umirc.js 中配置
export default {
plugins: [
['umi-plugin-dll', {
exclude: ['babel-runtime'],
include: ['react', 'react-dom'],
}],
],
};创建入口文件
在项目根目录创建 src/index.js 文件，并输入以下内容：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- --- ------- --------- -
-------- -
------ -
---------- -------------
--
-
-
----------------
---- ---
-------------------------------
--在 webpack.config.js 中配置
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- ----------------------------
-------- ----------
--------- -------------------------------------
---
--- ----------------------------
-------- ----------
--------- -----------------------------------------
---
--
--生成 Dll
在终端中运行以下命令来生成 Dll：
umi dll
运行项目
在终端中运行以下命令来启动项目：
umi dev
结束语
在实际开发中，使用 umi-plugin-dll 能够显著提高构建效率，特别是对于多页面应用或者使用了大量第三方库的项目来说，更是如此。除此之外，本文还提供了一个具体的示例，帮助读者更好地理解 umi-plugin-dll 的用法。希望读者能够学到一些有用的知识，为前端开发的高效工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad9bb5cbfe1ea0610ca8