繁体   English   中英

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

[英]What are the benefits of concatenating all Javascript files into one before sending it to client?

例如,如果您有

<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 文件合并为一个文件有以下好处:

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

缩小 JS 文件使其下载和解析更小,从而提高下载性能。

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


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

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

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

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

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


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

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

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

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

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

CSS 文件也是如此。

另外,这种组合文件有时会经过一个缩小过程,产生语法上等效的文件,这些文件更小。

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

很简单:

  1. 减少延迟(1 个文件意味着一个 HTTP GET)以浪费带宽和不必要的内存资源消耗为代价。 (脚本需要加载、解析、执行,即使不需要)
  2. 更难调试(1 次导入)与更易阅读。

如果您的页面肯定会全部使用它们,那么继续将它们作为一个加载。 但这是一个粗略的假设,通常会失败。 作为一般规则,单片代码库是不好的。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM