在前端开发中，我们经常需要使用许多开源的 JavaScript 库和框架来实现我们的功能。这些库和框架通常以 npm 包形式发布，并通过 npm 的管理工具来安装和使用。在一些场景下，我们需要将这些库和框架打包到一个 bundle 中，以便于部署和运行，然而这样做可能会导致 bundle 的体积过大，影响网页的加载速度。这时，我们可以使用 externals-dependencies 这个 npm 包来优化我们的打包结果。
externals-dependencies 是什么？
externals-dependencies 是一个 webpack 插件，它可以将你的项目中使用的一些依赖库从打包的 bundle 中剔除，从而使打包的结果更小，更加轻量。这些被剔除的库会被声明为 external，即通过外部引用来加载。这种方式可以减少 bundle 的大小，并且可以使浏览器更加高效地缓存这些库。
如何使用 externals-dependencies？
使用 externals-dependencies 很简单。首先，我们需要使用 npm 安装这个包：
npm install externals-dependencies –save-dev
安装完成后，我们需要在 webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- --------------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------------
-------- --- -- --------
---
--
--其中，exclude 参数表示需要在打包中排除的依赖库列表。这个列表的值应该是一个正则表达式或者一个函数，用于匹配打包中需要剔除的库。
示例代码
下面是一个示例代码，演示如何使用 externals-dependencies 来剔除 lodash 库：
-- -------------------- ---- -------
-- -----------------
----- --------------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------------
-------- -----------
---
--
--
-- --------
------ - ---- ---------
------------------------------- ---------在这个例子中，我们引入了 lodash 库，将其用于控制台输出了字符串的首字母大写。但是，在我们打包时，我们并不需要将 lodash 库打包进 bundle 中，因为它已经是一个独立的库，可以通过 CDN 或其他方式进行加载。在 webpack 配置中，我们使用 externals-dependencies 插件来声明 lodash 库为 external，这样就可以将其从打包结果中剔除。
总结
使用 externals-dependencies 可以帮助我们优化前端打包的结果，减少 bundle 的大小，提高网页的加载速度。如果你的项目中使用了大量的依赖库，建议尝试使用 externals-dependencies 来进一步优化打包结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573f081e8991b448e9d0d