在将所有 Javascript 文件发送给客户端之前将其连接成一个有什么好处？
[英]What are the benefits of concatenating all Javascript files into one before sending it to client?
问题描述
For example, if you have
例如，如果您有
<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>
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除了 html 中的漂亮之外，还有什么好处是让所有这些都被一个正在运行的任务（Grunt/Gulp）连接和缩小，然后以以下形式发送给客户端
<body>
<script src="allTheJavascripts.js"></script>
</body>
3 个解决方案
解决方案1
19 已采纳 2015-04-15 18:19:33
Combining multiple JS files into one file has the following benefits:将多个 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.下载文件的一个 http 连接通常比下载较小文件的许多 http 连接更快。
- 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...).此限制适用于与域的所有连接（JS 文件下载、CSS 文件下载、帧下载、ajax 调用等）。
- Server scalability can be increased because each page download requires fewer http connections to serve the content.服务器可扩展性可以提高，因为每个页面下载需要更少的 http 连接来提供内容。
- 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.在某些情况下，版本控制以及版本升级和浏览 JS 文件缓存之间的交互可以通过一个更大的 JS 文件变得更简单。 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).当你所有的 JS 文件都连接起来时，你可以为这个组合的 JS 文件分配一个版本号（就像 jQuery 对其版本所做的那样）。 Then, any change to the JS anywhere causes a bump in the version number for the master combined file.然后，任何对 JS 的任何更改都会导致主组合文件的版本号发生变化。 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.此外，维护一个主版本号比对许多较小文件进行版本控制要简单得多。
Minifying a JS file makes it smaller to download and parse which increases download performance.缩小 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 文件然后缩小，你可以缩小在不同 JS 文件之间共享的所有符号（只要它们不被外部共享）。
Obviously, there are some limits here and things don't get arbitrarily better if the whole world puts their JS into one file.显然，这里有一些限制，如果全世界都将他们的 JS 放到一个文件中，事情不会变得任意好转。 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.每次使用都必须决定如何绘制权衡线。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.
您可能不希望将定期修改的代码与几乎不会更改的代码打包在一起，因为如果大型组合 JS 总是在变化，这会降低浏览器缓存的效率。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.您通常希望针对更广泛的需求优化打包，而不仅仅是针对单个项目。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.
移动访问通常具有较小的缓存、较慢的 CPU 和较慢的连接，因此在打包内容时考虑访问最多的移动页面的需求也很重要。
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.
必须对合并和最小化的站点进行测试，以确保这些额外步骤不会导致任何问题。
解决方案2
4 2015-04-15 17:55:02
Many browsers limit the number of concurrent HTTP requests to a particular domain.许多浏览器限制了对特定域的并发 HTTP 请求数。 Concatenating the JavaScript files reduces the number of HTTP requests needed, allowing the files to be downloaded faster.连接 JavaScript 文件可减少所需的 HTTP 请求数量，从而可以更快地下载文件。
The same is true for CSS files. CSS 文件也是如此。
Separately, such combined files are sometimes put through a minification process that produces syntactically equivalent files, that are smaller.另外，这种组合文件有时会经过一个缩小过程，产生语法上等效的文件，这些文件更小。
One downside is that, if any component file changes, the cache for the entire combined file must be invalidated and the combined file reloaded.一个缺点是，如果任何组件文件发生更改，则必须使整个组合文件的缓存无效并重新加载组合文件。 This is a very small downside for most scenarios.对于大多数情况，这是一个非常小的缺点。
解决方案3
0 2015-04-15 17:57:32
Very simple:很简单：
- Reduced Latency (1 file mean one HTTP GET) traded for wasted bandwidth and unnecessary consumption of memory resources.减少延迟（1 个文件意味着一个 HTTP GET）以浪费带宽和不必要的内存资源消耗为代价。 (Scripts needs to be loaded, parsed, execute even if not needed) （脚本需要加载、解析、执行，即使不需要）
- More difficult to debug (1 import) vs. easier to read.更难调试（1 次导入）与更易阅读。
If your page is definitely going to use them all, then go ahead and load them as one.如果您的页面肯定会全部使用它们，那么继续将它们作为一个加载。 But that's a gross over assumption that generally breaks down.但这是一个粗略的假设，通常会失败。 As a general rule, monolithic code base is bad.作为一般规则，单片代码库是不好的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.