Do I need to put many small JS files into one big one?

Question

css

There is a project on AngularJS, at the moment it has about 80 js files.
The question arose: should they be folded into one?
My employer says: "if you upload 10 files asynchronously, 100kb each, it will be faster than one 1MB file" i.e. it’s not necessary to add up, but I think that it would be more correct to give JS in one big piece, but I can’t provide any arguments to refute his point of view.
Tell me who is right in this situation? How to do it right?

Answer 1

There is a good optimization program that uses many optimization methods without losing quality. Well, if you have a picture without transparency, then it's better to make jpg) another stupid optimization option)
FileOptimizer

Answer 2

Ask him. what he meant. Optimized can be understood as resizing for monitors (adaptability), or can be understood as reducing the size in kb. My clients often say this.

Answer 3

Photoshop option:
Quality: 60 (no longer needed for the web)
Tick progressive (progressive loading)

Answer 4

If you are using HTTP2, then it is not necessary, but it is unlikely.
And if you upload 80 files of 10kb each, then it will be slower than 10 files of 100kb each, since the cost of establishing a connection will be more than the waiting time for the delivery of the next portion of data.
The browser makes requests for resources in parallel (you can look in the browser debugger, there is also information about who is blocking the download), so downloading several files will be faster than downloading one large one. But, even taking into account keep alive, the browser cannot fully reuse in this connection scenario, and it will produce them in large numbers, and the more of them, the greater the load on the server, the slower the static will be. So a balance needs to be found.
I would suggest splitting everything into:
- angular.js
- vendor.bundle.js - all 3rd party modules and stuff
- app.bundle.js - all application files.
then yes. asynchronous loading will be faster.

Answer 5

Not only possible but also necessary:
​​1. Build via Grunt/Gulp
2. Minified
3. Compressed with gzip
4. Cached by the browser
5. Uses only 1 request per server.
When loading a site, different browsers have a limited number of simultaneously executed requests (on mobile devices, there are generally few), besides, you have not only JS files there, there are also css, pictures, etc. They all line up to be loaded. So, in 99.9% of cases, loading one JS file will always be faster than loading several.

Answer 6

Parallel loading can only be beneficial if you don't hit the maximum number of connections. And taking into account the fact that in addition to js files, you also need to load css, images, and other resources, it’s quite easy to hit the limit.
Here is a not very recent (~two years ago) but list of supported number of connections onedev.net/post/231

Answer 7

работодатель говорит: "если загрузить асинхронно 10 файлов по 100кб то это будет быстрее чем один 1МБ файл"

Работодатель тупенький, это нормально.
Аргумент простой: создайте 1000 файлов на диске, общим весом в Х мегабайт.
Создайте рядом один файл таким же весом.
Предложите работодателю скопировать то и другое по очереди. И сравнить время.
Думаю, этого эксперимента хватит даже для самых упоротых.