Is relying on a few large files since dependencies are effective?

Question

I am developing a web application with many third-party javascript and css dependencies. Since I discovered Node.js, bower, and gulp, finding and installing such dependencies was easy. However, I aggressively pursued a policy of concatenating all of my javascript into a single file, as well as for all of my stylesheets. After concatenating and minimizing, my web application depends on only two rather large files (main.js and main.css). For reference, my main.js file is 1.6 MB and the main.css file is 261 KB. Not huge by any means, but they are much larger than any of the individual dependencies. Is this optimal, or does the growing size of these files outweigh the optimization resulting from fewer requests? Is there a scenario when this strategy would be a bad idea?

Answer 1

Yes. Do not consolidate network costs. But when js gets so big, it has to be split.

All major browsers preload your script and css. So, if you divide 1.6 MB js by 3, the browser will download all three and css together into 4 connections.

You may think the overall throughput is the same, so why bother? But it can be faster because:

• It increases the bandwidth from the server.
• It consumes more bandwidth from other programs / services.
• It increases throughput from other tabs in the same browser.
• Parts can be analyzed and possibly performed when other parts are still loading.
• If you update only one of the parts, other parts can be read from the cache.

1.6MB is very large, and you should see a speed improvement if you split it. But the sweet spot depends on many factors, so you need to experiment to see which part size is best for you.

In fact, it is so large, you should postpone the script, as Mr_Green commented. Let your css and html go first, show the download icon, and then load your large scripts.