连接所有 JavaScript 文件（包括供应商）有什么缺点吗答案

【问题标题】：Are there any disadvantages to concatenating all JavaScript files (including vendor)连接所有 JavaScript 文件（包括供应商）有什么缺点吗
【发布时间】：2013-07-31 12:47:07
【问题描述】：

为了尽量减少对我的服务器发出的请求数量并缩短加载时间，我正在考虑连接我的所有 JS 文件，包括供应商 js 文件，如 angular、jquery-ui、... 这样做是一种常见的做法，但我经常看到不将其供应商 JS 文件包含在同一个 JS 文件中的网站。我知道很多网站都使用 CDN 来重用其他页面可能使用过的 JS 文件的缓存版本。但是，有时，它们是在同一服务器上提供的单独供应商 JS 文件，例如在 Github 上：

Github 有：

Frameworks.js 包含 Modernizr、jQuery
github-...js 包含来自 Github 本身的 JS。

这样做有什么特别的原因吗？它们是否会因为您连接所有 JS 文件而出现任何问题？

【问题讨论】：

标签： javascript performance concat

【解决方案1】：

主要原因是尽量减少http请求的数量。在更大的项目中，如果您使用像 MV* 这样的模式，您可能希望将每个模块抽象到外部 .js 文件中。例如，这可能会导致许多文件 30-40。在这种情况下，您可能希望将其连接到单个文件中。

在一个较小的项目中，您将拥有 3-4 个 js 文件，您可以使用 then 而不连接。我使用 requirejs 将模块定义为 AMD 并将每个模块都放在外部文件中。然后我使用 requirejs 构建脚本来管理依赖和连接的部署文件。

自动化这个过程的好工具

【讨论】：

【解决方案2】：

取决于您的应用程序如何。假设你有 20 个 0.5MB 的 js 文件。其中第一页只需要 2 (1MB)。您可能希望将它们分开并结合其他。在第一页上以延迟模式加载其他人。因此，当您了解要组合的所有内容时，组合文件会很好。作为一般规则，如果您的文件很少，那么它确实不会产生很大的影响。

在合并 javascript 文件之前应该考虑的一些事情，

当您将 100 个文件组合在一起时。您正在减少 99 个请求。但您也在执行以下操作：
* 增加下载单个文件所需的时间（并且可能会阻止加载重要页面）
* 考虑解析我们刚刚提取的附加 JS 代码所花费的时间来自服务器，此时甚至可能不需要它。 javascript 引擎变得越来越快，但它仍然是真实的，一个显着解析 javascript 代码所花费的时间。

所以，简而言之，答案是 - “它始终是一个权衡游戏，了解你的代码会有所帮助”:)

http://tomdale.net/2012/01/amd-is-not-the-answer/ 是类似行的有趣读物。

【讨论】：

【解决方案3】：

就性能而言，它不会有所作为。如果您对所有框架都有一个单独的文件感到恼火，那么我想您可以做到。否则，您只会填写一个文件，并且在以后尝试更新框架时可能会遇到问题。

【讨论】：