在将所有 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 中的漂亮之外，让所有这些在以
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 的任何更改都会导致主组合文件的版本号增加.由于给定的浏览器全部或不获取整个组合文件，因此浏览器永远不会意外地从服务器中获取一个文件的一个版本，而从过时的浏览器缓存中获取另一个文件的另一个版本.此外，维护一个主版本号比对大量较小文件进行版本控制要简单得多.
缩小 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屋！
