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

例如，如果你有

<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>

最佳答案

将多个 JS 文件合并为一个文件有以下好处:

与下载多个较小的文件相比，浏览器可以更高效、更快速地下载单个文件。一个 http 连接下载文件通常比许多 http 连接下载较小的文件要快。

浏览器对同一域的同时连接数有限制，如果达到该限制，则某些连接必须等待其他连接完成。这会导致下载延迟。下载较少的文件使其不太可能达到此限制。此限制适用于域的所有连接(JS 文件下载、CSS 文件下载、框架下载、ajax 调用等)。

服务器可扩展性可以提高，因为每个页面下载需要更少的 http 连接来提供内容。

在某些情况下，版本控制以及版本升级和浏览 JS 文件缓存之间的交互可以通过一个更大的 JS 文件变得更简单。当您所有的 JS 文件都连接起来后，您可以为该组合的 JS 文件分配一个单一的版本号(就像 jQuery 对其版本所做的那样)。然后，任何地方对 JS 的任何更改都会导致主组合文件的版本号增加。由于给定的浏览器全部或不获取整个组合文件，因此浏览器永远不会意外地从服务器中获取一个文件的一个版本，而从过时的浏览器缓存中获取另一个文件的另一个版本。此外，维护一个主版本号比对许多较小的文件进行版本控制要简单得多。

缩小 JS 文件可以使下载和解析更小，从而提高下载性能。

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

显然，这里有一些限制，如果全世界都将他们的 JS 放在一个文件中，事情不会变得任意好转。在决定将哪些内容打包成一个文件时需要考虑的一些事项:

您不希望大量页面解析和执行他们不会使用的大量代码。这显然是一种权衡，因为如果代码被有效缓存，那么它就不是下载问题，而只是运行时效率问题。每次使用都必须决定如何绘制该折衷线。

您可能不希望将经常修改的代码与几乎不会更改的代码打包在一起，因为如果大型组合 JS 总是在更改，这会降低浏览器缓存的效率。

在具有多个项目共享代码的团队环境中，考虑将事物打包成组合和缩小的块以适用于共享代码的最大数量的项目是非常重要的。您通常希望针对更广泛的需求优化包装，而不仅仅是针对单个项目。

移动访问通常具有较小的缓存、较慢的 CPU 和较慢的连接，因此在打包内容时考虑最常访问的移动页面的需求也很重要。

以及组合和最小化的一些缺点:

直接调试最小化的站点可能非常困难，因为许多符号已经失去了它们有意义的名称。我发现出于调试/故障排除的原因，通常需要有一种方法来提供站点的未最小化版本(或至少某些文件)。

浏览器中的错误消息将引用组合/最小化的文件，而不是实际的源文件，因此可能更难以追踪导致报告的给定浏览器错误的代码。

必须对合并和最小化的站点进行测试，以确保这些额外步骤不会导致任何问题。

关于javascript - 在将所有 Javascript 文件发送到客户端之前将其连接成一个有什么好处？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29657345/

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

上一篇：没有http ://的javascript window.open

下一篇：javascript - 防止退格键在 AngularJS 中导航回来