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

Question

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

Bri*_*orn 7 javascript optimization http

例如,如果你有

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

Run Code Online (Sandbox Code Playgroud)

除了html中的漂亮之外,还有一个好处是让所有这些都被运行的任务(Grunt/Gulp)连接起来并缩小,然后再将其发送到客户端

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

jfr*_*d00 17

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

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

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

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

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

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

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

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

归档时间：	10 年，7 月前
查看次数：	2813 次
最近记录：	10 年，7 月前