为生产优化 js - 大量小或一个大的 js 文件

Posted 2023-03-07

【中文标题】为生产优化 js - 大量小或一个大的 js 文件

【英文标题】：Optimising js for production - Lots of small or one large js file

【发布时间】：2014-06-18 10:37:33

【问题描述】：

我有一个 AngularJS 应用程序，我希望对其进行优化以提高速度。

我目前正在将我需要的所有 bower_components 丑化并连接到 vendor.js 文件中。

我目前正在丑化我所有的自定义 js 并将其连接到一个 scripts.js 文件中。

因此，当用户下载页面时，get 请求中的资源非常少。 （目前总共 6 个没有图像资源）。缺点是我有两个大型 js 文档要下载 - 总共大约半兆字节 - 在完成任何页面渲染之前需要下载整个文档。

我主要关心的是vendor.js 文件。是使用 cdn 提供的、缩小的 javascript 文件（总共大约 10 个）更好，还是使用我的连接和丑化的 vendor.js 更好？

前者意味着在没有图片资源的情况下总资源将增加到 16 个，但它们将由不同供应商提供的 CDN 网络提供服务，从而允许并行下载。

【问题讨论】：

与此类优化问题一样，您只能通过尝试并分析结果来发现。即使这样，网络延迟也可能难以获得一致的答案。

Should I copy all my JavaScript sources into one single file?的可能重复

【参考方案1】：

尽管前者允许并行下载，但它是 16 个不同的 TCP 连接并嵌入了 HTTP，因此也发送了 16 个 HTTP 标头。 TCP 打开新连接的成本有点高。所以我认为将所有内容集中在一个文件中可能会更好。

无论如何，您可以做的是测试这两种情况并在您最喜欢的网络浏览器的网络开发人员工具中查看，平均而言，这是最快的方法。至少可以使用 Firefox。