使用外部库的成本是多少

What is the cost of using external libraries?

本文关键字：多少 外部      更新时间：2023-09-26

这是一些最常用的前端Web开发库：

  • jquery-min.js （95.9 kB）
  • 角度分钟.js （108.0 kB）
  • bootstrap.min.css （113.5 kB）
  • bootstrap-theme.min.css （19.8 kB）
  • 引导字体 （185.7 kB）
  • bootstrap.min.js （35.6 kB）

总而言之，这意味着+ 558.5 kB我们网站的每个页面。还有更多的服务器请求。那么，仅此而已吗？在我们的网站上使用外部库是否会产生更多（性能或其他）成本？

您包含的每个库在整个堆栈中都有成本和收益

成本

  • 加载和渲染的时间/延迟（性能）
    • 要
  • 提供给客户端的带宽，要部署的带宽（如果捆绑在一起）
  • 构建时间和文件大小（如果要将它们捆绑到部署包中）
  • 理解、修改、调试的复杂性
  • 证明给定 CSS 规则实际上不涉及的复杂性
  • 要加载到页面中的内存

好处

  • 通常更正确和完整的实现（如引导程序的可访问性）
  • 重用现有解决方案，缩短开发时间
  • 引导到一致的结构，远离临时的混乱
  • 更好、更简单的 API（vanilla XHR vs $http.get 等）

鉴于您的具体示例，一般来说，如果您使用的是 angular，则不需要 jQuery，并且应该避免使用它。您也可以只挑选你的网站实际使用的引导部分，或者只选择你实际使用的ui.bootstrap angle指令。

值得庆幸的是，558.5kB 最多只能命中 1 次（只要您不更改域或更改站点之间的 SSL 加密）。首次下载这些文件后，客户端会从缓存中加载它们。

正如@Felix Kling所建议的那样，如果您从CDN中提取它们，则很可能可以将1次命中变成0次命中，因为客户端已经从其他网站下载了它们。如果您正在考虑使用自定义 css 文件在引导 css 中进行烘焙，这一点很重要。让引导程序来自CDN（或本地缓存）并在顶部加载自定义内容可能会更快。

抓取文件

的性能不会有什么大不了的，因为现代浏览器快速提取 6 个文件没有问题。但是，浏览器必须将所有垃圾加载到内存中，这才是真正的打击所在。这是因为，例如，必须先加载 jquery，然后才能调用 jquery。因此，所有页面脚本都将等待jquery加载，直到它们采取行动。

如果没有更多信息，很难说出任何有形的东西，但是使用库通常是在易于开发和性能之间进行权衡。一些库的性能可能比"本机"JavaScript解决方案差，但提供了更易于维护的代码。

因此，测试网站在 JavaScript 代码

中的潜在瓶颈很有用，有时有正当的理由回退到原版 JavaScript，而不是更高级别的抽象（和更好的代码）。

使用 JavaScript 库的另一个结果可能是，如果不完全禁用 JavaScript，网站将不再运行 - 有时应该考虑这一点。

PS：一个简单的优化是将所有JavaScript放入一个捆绑包中，并将其最小化以达到尽可能低的加载成本。还应考虑 CDN。

相关文章：