背景
前端工程化在现在越来越普遍，为了在前端项目中提高性能，实现组件化与模块化，在名词轮回过程中诞生了许多工具。Webpack 是其中一个最流行的前端打包工具。在实际使用中，webpack 可以通过使用 DllPlugin 这个插件提高构建速度，减少输出文件体积，加快构建编译速率，提高前端性能体验。
dm-h5-dll 模块使得 Package 文件可以以工具库的形式运行，简化了 webpack.dll.js 配置文件的设置，并且可以在任何一个 webpack 配置文件中随意使用或加载 DLL 缓存。它使用到了 webpack.DllReferencePlugin，通过程序化的方式，添加dll程序生成的映射关系到 webpack。
用法
安装
在 package.json 中安装 dm-h5-dll：
npm i --save-dev dm-h5-dll
配置
- 创建一个名为
vendor_config.js的配置文件，输入以下配置进行自定义：
-- -------------------- ---- -------
-------------- - -
----- -
-- ----------------- ------------ ------------ ------ - ------
-- ---- ---------------- ----------------------------
- ---- --------- ---- -----
- ---- -------- ---- ------- --
- ---- -------- ---- ---------- --
--
----------- -------------- -- ------ -----
----- --------- -- ------ --------- --------- ---- ---- ----
--- 在
webpack.config.js配置文件中使用dm-h5-dll
-- -------------------- ---- -------
----- ----- - ---------------------
----- ------------ - ------------------------------
-------------- - -
-- ------
-- ---
-------- -
-- -------------------------------------------
--- -------------------
-- ----- ----------------- ---- --------------- ----------- -------- ---
--------- -------------
--------- -------------
--------------- -------------------------------------------
---
-- -- ------ ----- -------- ------- ---------------------------------
--- --------------------
----- ---------
--------- ----------------------------- ---------------------------------------------------
-------- -------------------
---
-- -- --------- ---- --- ----
--- -------
----------------
---
-
--使用
引入Dll缓存
// index.js
import { _ } from 'lodash'; //引入缓存的 lodash 我们可以使用 _ 进行操作。
console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); // => [['a', 'b'], ['c', 'd']]注意事项
在使用时，需要在同构项目中找到依赖库的名称，并与 dllConfig.js 中声明的名称一致，否则会抛出
Miss dll reference plugin of vendor错误。vendor_config.js 中的
deps配置为需要当做缓存的包，可以在此任意指定。但是需要注意，该库的 name 可能会对多个webpack.DllPlugin实例之间产生重复。注意包含相同名称的运行时库的冲突。在这种情况下，可以将相同的库分布到不同的name缓存文件中并在manifest文件中指南。在某些场景下，可能需要在不同的模块之间共享缓存。为此，DllPlugin 暴露了 context 选项来解决这个问题。将 context 提供给 DllPlugin 后，它将被用作生成 manifest 文件的路径，而不管 DllPlugin 在那个模块中执行。
缓存顺序问题
当配置了多个 DllPlugin 进 http://www.webpackjs.com/plugins/dll-plugin/configuration/options/#name行缓存时，如果其中一个库更改了版本或不再使用，并且重新生成了manifest 文件，并且未重新构建主应用程序/客户端，此时正在运行的应用程序将不能自动具有更新。
结语
使用 dm-h5-dll 可以大大提高 webpack 的构建速度，如果前端工程化中使用到了 webpack.DllPlugin 插件，不妨可以尝试使用该 npm 包来更加方便快捷的使用 webpack.DllPlugin 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a0481e8991b448d7ac3