Question

例如，如果你有

<body>
    <script src="someLibrary.js"></script>
    <script src="someLibrary2.js"></script>
    <script src="someLibrary3.js"></script>
    <script src="someLibrary4.js"></script>
    <script src="myApp"></script>
</body>

除了html中的漂亮之外，还有一个好处是让所有这些都被运行的任务（Grunt / Gulp）连接起来并缩小，然后再以

的形式发送给客户端

<body>
    <script src="allTheJavascripts.js"></script>
</body>

Answer 1

将多个JS文件合并到一个文件中有以下好处：

浏览器可以比下载多个较小的文件更有效，更快速地下载单个文件。下载文件的一个http连接通常比下载较小文件的许多http连接快。
浏览器对同一个域的同时连接数量有限制，如果达到该限制，则某些连接必须等到其他连接完成。这会导致下载延迟。下载较少的文件使其不太可能达到此限制。此限制适用于域的所有连接（下载JS文件，下载CSS文件，下载帧，ajax调用等）。
可以提高服务器的可扩展性，因为每次下载页面都需要较少的http连接来提供内容。
有些版本控制以及版本升级和浏览JS文件缓存之间的交互可以通过一个更大的JS文件更简单。当所有JS文件连接在一起时，您可以为该组合的JS文件分配单个版本号（就像jQuery与其版本一样）。然后，任何对JS的任何更改都会导致主组合文件的版本号出现问题。由于给定的浏览器全部或全部获取整个组合文件，因此浏览器永远不会有机会从服务器中获取新文件的一个版本，而从陈旧的浏览器缓存中获取另一个版本的另一个文件。此外，维护一个主版本号比版本化大量较小的文件简单得多。

缩小JS文件会使其下载和解析变小，从而提高下载性能。

如果您要同时组合多个文件并进行缩小，则缩小可能会更有效。分别缩小多个小文件时，无法缩小不同文件之间共享的变量名称 - 它们必须保留其原始名称。但是，如果组合所有JS文件然后缩小，则可以缩小不同JS文件之间共享的所有符号（只要它们不在外部共享）。

显然，这里存在一些限制，如果整个世界将JS放入一个文件中，事情就不会随意变得更好。在决定将什么打包成一个文件时需要考虑的一些事项：

您不希望大量的页面解析并执行他们不会使用的大块代码。这显然是一个权衡，因为如果代码被有效地缓存，那么它不是一个下载问题，而只是一个运行时效率问题。每次使用都必须决定如何绘制该权衡线。
您可能不希望使用几乎不会更改的代码来定期修改代码，因为如果大型组合JS总是在变化，这会降低浏览器缓存的效率。
在一个共享代码的多个项目的团队环境中，考虑将事物打包成适用于共享代码的最大数量项目的组合和缩小块是非常重要的。您通常希望针对更广泛的需求优化包装，而不仅仅针对单个项目。
移动访问通常具有较小的缓存，较慢的CPU和较慢的连接，因此在您打包的方式中考虑访问最多的移动页面的需求也很重要。

结合和最小化的一些缺点：

直接调试最小化的网站可能非常困难，因为许多符号都失去了有意义的名称。我发现为了调试/故障排除的原因，通常需要一种方法来提供最小化版本的站点（或至少一些文件）。
浏览器中的错误消息将引用组合/最小化文件，而不是实际源文件，因此可能更难以找到导致报告的给定浏览器错误的代码。
必须对合并后的最小化网站进行测试，以确保这些额外步骤不会导致任何问题。

Answer 2

许多浏览器限制了对特定域的并发HTTP请求数。连接JavaScript文件可减少所需的HTTP请求数，从而可以更快地下载文件。

CSS文件也是如此。

另外，这样的组合文件有时会通过缩小过程来生成语法等效的文件，这些文件较小。

一个缺点是，如果任何组件文件发生更改，则必须使整个组合文件的缓存无效并重新加载组合文件。对于大多数情况来说，这是一个非常小的缺点。

Answer 3

很简单：

减少延迟（1个文件意味着一个HTTP GET）交易浪费的带宽和不必要的消耗内存资源。（即使不需要，脚本也需要加载，解析，执行）
更难调试（1导入）与更容易阅读。

如果您的页面肯定会全部使用它们，请继续将它们作为一个加载。但这是一个严重的假设，通常会崩溃。作为一般规则，单片代码库很糟糕。

在将所有Javascript文件发送到客户端之前将其连接成一个有什么好处？

3 个答案: