将所有 js 文件合并到一个文件中是不是一定更快？

Posted 2023-03-10

【中文标题】将所有 js 文件合并到一个文件中是不是一定更快？

【英文标题】：is combining all js files into a single file necessarily faster?将所有 js 文件合并到一个文件中是否一定更快？

【发布时间】：2016-11-28 09:27:43

【问题描述】：

我总是听说在生产环境中，您希望将多个 .js 文件合并为 1 个以使其加载更快。

但由于浏览器实际上是同时发出多个请求，因此加载多个文件的速度可能比加载单个文件的速度更快，而单个文件必须从头到尾下载。

这个推理正确吗？

【问题讨论】：

另一点是您可能正在组合用户已经缓存的文件，因为它们很受欢迎，例如。 jQuery。

【参考方案1】：

这取决于你的服务器是 HTTP/2 还是 HTTP/1.1。

HTTP/2

HTTP/2 (H2) 允许服务器快速响应多个请求，允许客户端简化所有请求，而无需等待第一个返回和解析。这有助于减轻对连接的需求，但并不能完全消除它。请参阅this post，了解何时应该或不应该连接的深入答案。

要记住的另一件事是，如果您的服务器对您的资产进行 gzip 压缩，实际上最好将其中一些连接在一起，因为 gzipping 可以更好地处理具有大量重复文本的较大文件。通过将所有文件分开，您实际上可能会损害您的整体性能。找到最佳解决方案需要一些试验和错误（其中很多仍然是新的，因此仍在发现最佳实践）。

HTTP/1.1

使用 HTTP/1.1，正如其他答案所指出的那样，在大多数情况下，将所有文件合并为一个更好。这减少了 HTTP 请求的数量，这在 HTTP/1.1 中可能会很慢。有一些方法可以通过从不同的子域请求资产以允许多个并发请求来缓解这种情况。

我建议阅读 High Performance Browser Networking 以全面了解 HTTP/1.1 的策略。

【参考方案2】：

对于大型 JS 文件：

不是好主意，如果你有小的 JS 文件，那么合并是个好主意，否则 假设如果 JS 文件超过 500kbs，那么单个文件将在 MBS 并占用大量加载 HTTP 请求时间。

对于小型 JS 文件：

好主意，对于小型来说，它有好主意，但最好只使用第 3 方工具 这还将压缩您的最终单个文件，以便 HTTP 请求 时间将花费更少的时间。我建议使用 php Minify（但你可以找到其他适合你的），它可以让 您为一组 JS 或 CSS 文件创建单个 HTTP 请求。 Minify 还为客户端处理 GZipping、压缩和 HTTP 标头 侧面缓存。

PHP minify 演示状态

之前

之后

【参考方案3】：

这是一个复杂的领域。

浏览器与同一服务器（通常数量有限）建立多个并发连接不会使客户端和服务器之间的连接更快。它们之间的管道只有这么大，服务器只有这么多的交付能力。因此，几乎没有任何理由相信来自同一服务器的 4 次并行下载（每次 10k）可能比从该服务器下载 1 次 40k 更快。再加上浏览器限制到同一服务器的并发连接数，以及设置这些单独连接的费用（这很重要），而且您最好为自己的脚本使用一个大文件.

现在。这是 Google 和其他公司正在积极开发的领域。

如果您可以从多个服务器加载脚本（例如，可能从使它们可访问的多个 CDN 中的任何一个加载公共库，并从您自己的服务器 [或 CDN] 加载您自己的单个组合脚本），这可能是有意义的把它们分开。它不会使客户端的连接更快，但如果客户端的连接不是限制因素，您可以获得好处。当然，对于一个没有理由拥有自己的 CDN 的站点，从免费 CDN 加载公共库并从您自己的服务器仅加载您自己的脚本可以让您在加载的脚本上获得边缘投射等优势免费的 CDN。