在将所有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），然后以
What is the benefit aside from prettiness in the html to having all of those be concatenated and minified by a task running (Grunt/Gulp) before sending it to client in form of
<body>
<script src="allTheJavascripts.js"></script>
</body>
推荐答案
将多个JS文件合并到一个文件中具有以下好处：
Combining multiple JS files into one file has the following benefits:
- 浏览器可以比下载多个较小的文件更有效，更快地下载单个文件。下载文件的一个http连接通常比下载较小文件的许多http连接快。
- 浏览器对同一个域的同时连接数量有限制，如果到达这个限制，一些连接必须等到其他人完成。这会导致下载延迟。下载较少的文件使其不太可能达到此限制。此限制适用于域的所有连接（下载JS文件，下载CSS文件，下载帧，ajax调用等等。）。
- 服务器可伸缩性可以增加，因为每个页面下载需要更少的http连接来提供内容。
- 有些版本控制以及版本升级和浏览JS文件缓存之间的交互可以通过一个更大的JS文件更简单。当所有JS文件连接在一起时，您可以为该组合的JS文件分配单个版本号（就像jQuery与其版本一样）。然后，任何对JS的任何更改都会导致主组合文件的版本号出现问题。由于给定的浏览器全部或全部获取整个组合文件，因此浏览器永远不会有机会从服务器中获取新文件的一个版本，而从过时的浏览器缓存中获取另一个版本的另一个文件。此外，维护一个主版本号比版本化大量较小的文件简单得多。
- Browsers can download a single file more efficiently and faster than downloading multiple smaller files. One http connection downloading the file is usually faster than many http connections downloading smaller files.
- The browser has a limit on how many simultaneous connections it will make to the same domain and, if it reaches that limit, some connections have to then wait until others finish. This causes delays in download. Downloading fewer files make it less likely to hit this limit. This limits applies to all connections to a domain (download of JS files, download of CSS files, download of frames, ajax calls, etc...).
- Server scalability can be increased because each page download requires fewer http connections to serve the content.
- There are cases where version control and the interaction between version upgrades and browsing JS file caching can be simpler with one larger JS file. When all your JS files are concatenated, you can assign a single version number to that combined JS file (like jQuery does with its versions). Then, any change to the JS anywhere causes a bump in the version number for the master combined file. Since a given browser gets the entire combined file all or nothing, there is never an opportunity for a browser to accidentally get one version of one file fresh from the server and another version of another file from a stale browser cache. Also, maintaining one master version number is a lot simpler than versioning lots of smaller files.
缩小JS文件使下载量更小并且解析会提高下载性能。
Minifying a JS file makes it smaller to download and parse which increases download performance.
如果您要同时组合多个文件并进行缩小，则缩小可能会更有效。分别缩小多个小文件时，无法缩小不同文件之间共享的变量名称 - 它们必须保留其原始名称。但是，如果您将所有JS文件组合在一起然后缩小，则可以缩小不同JS文件之间共享的所有符号（只要它们不在外部共享）。
If you are both combining multiple files AND minifying, the minifying can be more effective. When minifying multiple small files separately, you cannot minify variable names that are shared between the different files - they must retain their original names. But, if you combine all the JS files and then minify, you can minify all symbols that are shared among the different JS files (as long as they aren't shared externally).
显然，这里存在一些限制，如果整个世界将JS放入一个文件中，事情就不会随意变得更好。在决定将什么打包成一个文件时需要考虑的一些事项：
Obviously, there are some limits here and things don't get arbitrarily better if the whole world puts their JS into one file. Some things to think about when deciding what to package together into one file:
-
你不需要一大群你的要解析和执行他们不会使用的大块代码的页面。这显然是一个权衡，因为如果代码被有效地缓存，那么它不是一个下载问题，而只是一个运行时效率问题。每次使用都必须决定如何绘制该权衡线。
You don't want a large group of your pages to be parsing and executing a large block of code that they will not use. This is obviously a tradeoff because if the code is being effectively cached, then it's not so much a download issue, but rather just a runtime efficiency issue. Each use will have to decide how to draw that tradeoff line.
您可能不希望打包经常修改的代码，因为代码几乎没有变化，因为如果大型组合JS总是在变化，这会降低浏览器缓存的效率。
You may not want to package code that is revised fairly regularly with code that hardly ever changes because this degrades the efficiency of browser caching if the large combined JS is always changing.
在多个项目共享代码的团队环境中，思考是非常重要的将事物打包成合并和缩小的块，这些块适用于共享代码的最大数量的项目。您通常希望针对更广泛的需求优化打包，而不仅仅针对单个项目。
In a team environment with multiple projects sharing code, it is very important to think about packaging things into combined and minified chunks that work for the largest number of projects sharing the code. You generally want to optimize the packaging for the broader needs, not just for a single project.
移动访问通常具有较小的缓存，较慢的CPU和较慢的连接，因此考虑到你打包过的手机页面的需求也很重要。
Mobile access often has smaller caches, slower CPUs and slower connections so its important to consider the needs of your most accessed mobile pages in how you package things too.
结合和最小化的一些缺点：
And some downsides to combining and minimizing:
-
直接调试最小化的网站可能非常困难，因为许多符号都失去了有意义的名字。我发现为了调试/故障排除的原因，通常需要一种方法来提供最小化版本的网站（或至少一些文件）。
Directly debugging the minimized site can be quite difficult as many symbols have lost their meaningful names. I've found it often required to have a way of serving an unminimized version of the site (or at least some files) for debugging/troubleshooting reasons.
浏览器中的错误消息将引用组合/最小化文件，而不是实际的源文件，因此可能更难以找到导致报告的给定浏览器错误的代码。
Error messages in browsers will refer to the combined/minimized file, not to the actual source files so it is can be more difficult to track down which code is causing a given browser error that has been reported.
必须对组合和最小化的网站进行测试，以确保这些额外步骤不会导致任何问题。
The combined and minimized site has to be tested to make sure no issues were caused by these extra steps.
这篇关于在将所有Javascript文件发送到客户端之前将其连接成一个有什么好处？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
