Bundling all js files in a single bundle and same with css files

Question

I understand that one of the advantages of bundling is reducing the number of requests to server. So Why not bundle all js files into one, and all cs files into one? Are there any disadvantages to this approach?

Answer 1

The main disadvantage with this approach is that the browser must download the entirety of your javascript file before it can begin to execute any of it. Most likely that will slow things down, but there are some frameworks/tools that do just that for optimization. It may help with a bunch of small files to overcome the http overhead.

Also, if you change any of the files in the bundle you have to invalidate the cache and give the client an entirely new(large) bundle to download and cache again.

However, as this link explains, such approaches may not be beneficial when http 2.0 is mainstream. And there appears to be a bandwidth threshold where diminishing returns as far as speed vs latency come into play.

Answer 2

For example you got 2 pages and 3 javascripts

javascript 1 and 2 are 1kb each

javascript 3 is 1mb

Page 1 only needs javascript 1 and javascript 2

Page 2 only needs javascript 1 and javascript 3

You can probably see the disadvantages now

Answer 3

If you have only one file you cannot take advantage of browser parallel/concurrent downloads.