将所有JavaScript文件（包括供应商）连接起来有什么缺点吗？

Question

为了最小化向服务器发出的请求并提高加载时间，我考虑将所有JS文件（包括angular、jquery-ui等供应商JS文件）合并在一起。这是一种常见的做法，但我经常看到一些网站没有将供应商JS文件包含在同一个JS文件中。我知道很多网站使用CDN来重用其他页面可能使用的JS文件的缓存版本。然而，有时候它们是独立的供应商JS文件，例如在Github上：

Github有： Frameworks.js 包含 Modernizr，jQuery github-...js 包含 Github 自身的 JS。

这样做是否有特定的原因？合并所有JS文件会出现哪些问题呢？

- edi9999

Answer 1

主要原因是为了减少http请求的数量。在一个更大的项目中，如果你使用一些像MV*这样的模式，你可能想要将每个模块抽象成一个外部.js文件。这可能会导致许多文件，例如30-40个。在这种情况下，您可能希望将它们合并成单个文件。

在一个较小的项目中，您将使用3-4个js文件，而不进行合并。我使用requirejs将模块定义为AMD，并将每个模块放在外部文件中。然后我使用requirejs构建脚本来管理依赖关系和合并部署文件。

自动化此过程的好工具：

- RequireJS - GruntJS

- Gaurav Jassal

Answer 2

取决于您的应用程序如何。假设您有20个0.5MB的js文件，其中仅有2个（1MB）在第一页上需要使用。您可能希望将它们分开并合并其他文件。在第一页时延迟加载其他文件。因此，在了解要合并的所有内容时，合并文件是很好的选择。一般来说，如果您只有很少的文件，则真的没有太大差异。

在合并JavaScript文件之前，应考虑以下一些事项： 当您将100个文件合并在一起时，您减少了99个请求。但您还会执行以下操作：
* 增加下载该单个文件所需的时间（可能会阻止重要页面的加载）
* 账户花费的时间，解析我们刚刚从服务器上获取的额外JS代码，当可能在这一点上甚至不需要它时。 JavaScript引擎越来越快，但仍然是真的，很多时间花在解析JavaScript代码上。

因此，简而言之，答案是 - “这总是一种权衡游戏，了解您的代码有助于” :)

这是一篇有趣的阅读，与此类似。http://tomdale.net/2012/01/amd-is-not-the-answer/

- v2b

Answer 3

从性能方面来看，这并不会有任何区别。如果你讨厌为所有框架创建单独的文件，那么我想你可以这样做。否则，你只会在一个文件中填充内容，并且在尝试更新框架时可能会遇到问题。

- Jacob Morrison