随着前端技术的不断发展，我们的 Web 应用程序日益复杂，模块化开发也逐渐成为主流。但是随之而来的问题是，每次修改代码之后需要重新编译所有的模块，这对于大型项目来说耗时且效率低下。
为了解决这个问题，我们可以使用 DLL（动态链接库）来提高编译速度。本文将介绍一个叫做 @borodindmitriy/vendors-dll 的 NPM 包，并详细讲解如何使用它来提高项目的编译速度。
安装
安装 @borodindmitriy/vendors-dll 可以使用以下命令：
npm install @borodindmitriy/vendors-dll --save-dev
使用
使用 @borodindmitriy/vendors-dll 非常简单，只需要在 webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- ---------- - ---------------------------------------
-- ---
-------- -
--- ------------
----- ----------
-------- ----------
----------------- ------------------------
----------- ---------
-------- -
--------
------------
-- ---
-
---
--其中，plugins 数组中添加了一个 VendorsDll 的实例，配置了一些必要的参数：
name: DLL 文件名。context: 当前目录的绝对路径。manifestFileName: DLL 文件的 manifest 文件名。assetsMode: 输出文件的 hash 模式（可以是hashed、named或none）。modules: 需要打包到 DLL 中的模块。
指定完以上参数之后，我们就可以执行 npm run build:dll 命令来生成 DLL 文件了。
示例代码
如果你想查看更完整的示例代码，请参考以下代码。
webpack.config.js:
-- -------------------- ---- -------
----- ---------- - ---------------------------------------
-------------- - -
-- ---
-------- -
--- ------------
----- ----------
-------- ----------
----------------- ------------------------
----------- ---------
-------- -
--------
------------
-- ---
-
---
-- ---
--
-package.json:
{
"scripts": {
"build:dll": "webpack --mode production --config webpack.config.dll.js"
}
}webpack.config.dll.js:
-- -------------------- ---- -------
-------------- - -
------ -
-------- --------- ------------
--
------- -
--------- ----------------------------
----- -------
-------- -----------------
--
----- ------------
-这段配置文件的作用是生成一个包含 react 和 react-dom 的 DLL 文件。
总结
通过使用 @borodindmitriy/vendors-dll，我们可以大大提高项目的编译速度。希望本文能够对大家有所帮助，欢迎留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/127496