dm-fe-dll 是一个基于 Webpack 4 的优化工具，可以快速打包前端项目的 DLL 文件，加快项目打包速度。本文将详细介绍如何使用该 npm 包，并提供相关示例代码。
dm-fe-dll 简介
dm-fe-dll 可以理解为预编译依赖的一种方式，它会将常用的依赖打包成单独的 DLL 文件，在项目打包时先引入该文件，从而避免了重复打包。该工具可以有效减少代码体积，加快项目构建速度。
使用步骤
1. 安装 dm-fe-dll
npm install dm-fe-dll --save-dev
2. 创建配置文件
在项目根目录下创建 webpack.dll.config.js 文件，并进行如下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - --------- - - --------
-------------- - -
----- -------------
------ -
-------- -
--------
------------
--------
-
--
------- -
----- ----------------------- -------
--------- ----------------
-------- -----------------
-------------- ------
----------- ---
--
-------- -
--- -----------
----- -----------------
----- ----------------------- ---------------------------
--
-
--上述配置文件主要实现以下三个功能：
- 配置 entry 属性。有几个公共依赖需要打包，就在 entry 属性下创建几个 key-value 对，其中 key 即为包名，value 为一个数组，表示需要打包的依赖项。
- 配置 output 属性。该属性定义了打包生成的文件的输出路径、文件名、引用方式等信息。
- 配置 plugins 属性。该属性定义了使用哪些插件完成构建工作。此处使用了 Webpack 中的 DllPlugin 对象，该对象可以将打包好的文件作为一个公用库文件被项目中其他文件引用。
3. 配置 package.json
将 npm 的依赖加入到 bundle 数组中，添加启动脚本：
-- -------------------- ---- -------
-
---------- -
------ -------- -------- ----------------------
--
--------- -
---------
--------
-----------
--
--------------- -
------------ ---------
-
-4. 打包 DLL 文件
在项目根目录下运行以下命令：
npm run dll
运行成功后，会在项目根目录下生成一个 dll 目录，里面包含了打包好的文件。
5. 引入 DLL 文件
在项目中需要使用公用库文件的地方，直接引入生成的 DLL 文件即可。修改 webpack 配置文件，加入如下代码：
-- -------------------- ---- -------
----- ------------------ - -----------------------------------------
-------------- - -
-- ----------
-------- -
-- -- --- --
--- ----------------------------
-------- ----------
--------- --------------------------------------
---
-- - --- ----- ---- -
--- --------------------
--------- ----------------------- ----------------------
----------------- -----
--
-
-改完后，运行 npm run build 命令即可。
总结
在实际开发中，使用 dm-fe-dll 可以显著增加项目构建的速度，同时减少了文件体积。 dm-fe-dll 工具的配置需要一定的前端知识储备，但是掌握了核心概念和方法后，使用起来非常简单。本文提供了详细的使用步骤和相关示例代码，希望可以对大家开发过程中使用 dm-fe-dll 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583581e8991b448d5632