使用外部库的成本是多少？

Question

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

• jquery-min.js（95.9 kB）
• angular.min.js（108.0 kB）
• bootstrap.min.css（113.5 kB）
• bootstrap-theme.min.css（19.8 kB）
• bootstrap-fonts（185.7 kB）
• bootstrap.min.js（35.6 kB）

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

Answer 1

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

费用

• 加载和呈现的时间/延迟（性能）
• 为客户提供服务的带宽，捆绑时要部署的带宽
• 如果要将这些内容捆绑到部署包中，则构建时间和文件大小
• 理解，修改，调试的复杂性
• 证明某个CSS规则实际上不涉及所需的复杂性
• 内存加载到您的页面

优势

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

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

Answer 2

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

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

阻止文件的性能不会成为一件大事，因为现代浏览器没有快速拉出6个文件的问题。但是，浏览器必须将所有垃圾加载到内存中，这是实际命中的地方。这是因为，例如，您必须在调用jquery之前加载jquery。因此，所有页面上的脚本都将等待jquery加载，直到它们动作为止。

Answer 3

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

因此，测试网站中JavaScript代码中潜在的瓶颈是有用的，有时候有一个合理的理由可以回归到vanilla JavaScript，而不是更高级别的抽象（和更好的代码）。

使用JavaScript库的另一个结果可能是，如果没有禁用JavaScript，网站将无法运行 - 有时应考虑这一点。

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