All geek questions in one place

What are the benefits of combining all Javascript files into one before sending it to the 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 use of prettiness in html so that all of them are combined and minimized by a running task (Grunt / Gulp) before sending it to the client in the form

 <body> <script src="allTheJavascripts.js"></script> </body>
+6
source share
3 answers

Combining multiple JS files into one file has the following advantages:

  • Browsers can download a single file more efficiently and faster than downloading multiple smaller files. A single HTTP connection downloading a file is usually faster than many HTTP connections downloading smaller files.
  • The browser has a limit on the number of simultaneous connections that it will make in the same domain, and if it reaches this limit, some connections must wait until others finish. This causes a delay in loading. Downloading fewer files makes it less likely to reach this limit. These restrictions apply to all connections to the domain (loading JS files, loading CSS files, loading frames, ajax calls, etc.).
  • Server scalability can be increased because each page requires fewer http connections to serve content.
  • There are cases where version control and the interaction between version updates and viewing the caching of JS files can be easier with one large JS file. When all your JS files are merged, you can assign one version number to this merged JS file (for example, jQuery with its versions). Then any JS change anywhere causes an error in the version number for the main combined file. Since this browser receives the entire combined file, all or nothing, it will never be possible for the browser to accidentally get one version of one file from the server and another version of another file from the outdated browser cache. In addition, saving a single version number of the wizard is much easier than managing versions of a large number of small files.

Minimizing the JS file reduces its loading and analysis, which improves download performance.

If you both combine multiple files and minimize, minimizing can be more efficient. When mining several small files individually, you cannot minimize the names of the variables that are shared between different files - they must retain their original names. But, if you combine all the JS files and then reduce, you can minimize all the characters that are distributed between different JS files (if they are not shared externally).

Obviously, there are some limitations, and everything does not work out arbitrarily better if the whole world puts their JS in one file. Some things to consider when deciding how to pack together in one file:

  • You do not want a large group of your pages to parse and execute a large block of code that they will not use. This is obviously a compromise, because if the code is cached efficiently, it is not so much a problem with loading, but rather a problem of execution efficiency. Each use should decide how to draw this line of compromise.

  • You may not want the code of a package that has been fixed regularly enough with code that almost never changes, since this reduces the effectiveness of browser caching if a large combined JS always changes.

  • In a team environment with multiple project sharing codes, it is very important to think about how to pack things into combined and reduced pieces that work for the largest number of projects sharing code. Usually you want to optimize your packaging for wider needs, not just for one project.

  • Mobile access often has smaller caches, slower processors, and slower connections, so it’s important to consider the needs of your most visited mobile pages in how you pack.

And some disadvantages to combine and minimize:

  • Direct debugging of a minimized site can be quite difficult, as many characters have lost their meaningful names. I often found that troubleshooting / troubleshooting often requires an unlimited version of the site (or at least some files).

  • Browser error messages will relate to the merged / minimized file, not the actual source files, so it may be more difficult to determine which code is causing the indicated browser error that was reported.

  • The combined and minimized site should be tested to make sure that these additional steps did not cause any problems.

+14
source

Many browsers limit the number of concurrent HTTP requests in a particular domain. Combining JavaScript files reduces the number of HTTP requests required, allowing faster file uploads.

The same is true for CSS files.

Separately, such combined files are sometimes transferred through a miniaturization process that creates syntactically equivalent files that are smaller.

One drawback is that if any component file changes, the cache for the entire merged file must be invalid and the merged file reloaded. This is a very small drawback for most scenarios.

+4
source

Very simple:

  • Reduced latency (1 file means one HTTP GET), traded for wasted bandwidth and unnecessary consumption of memory resources. (Scripts must be downloaded, analyzed, executed, even if it is not needed).
  • It’s harder to debug (1 import) and easier to read.

If your page will definitely use all of them, then go and download them as one. But this is a crude assumption that usually breaks. As a rule, the foundation of monolithic code is bad.

0
source

Source: https://habr.com/ru/post/985206/

More articles:


All Articles