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

【问题标题】：What is the cost of using external libraries?使用外部库的成本是多少？
【发布时间】：2015-01-04 20:19:03
【问题描述】：

这是一些最常用的前端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)
引导字体 (185.7 kB)
bootstrap.min.js (35.6 kB)

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

【问题讨论】：

我想这就是为什么CDNs 存在的原因之一。
这是一个实际的问题吗？
大多数时候，用户的浏览器会缓存您的脚本，因此，您提到的额外 558.5 kb 并不总是起作用。如果您托管图书馆，则第一页访问至少会涉及成本。例如，如果您使用托管在 Google 的 CDN 上的库，那么如果用户在您之前访问过使用这些库的其他站点，则这些库可能已经缓存了。
@RoryMcCrossan 我不会捆绑外部库。
@ZippyV 显然，但它是 CDN 的替代方案，可减小请求页面的大小。

标签： javascript jquery css angularjs twitter-bootstrap

【解决方案1】：

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

费用

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

好处

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

因此，测试网站是否存在 JavaScript 代码中的潜在瓶颈很有用，有时有正当理由回退到原生 JavaScript，而不是更高级别的抽象（和更好的代码）。

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

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

【讨论】：