Concatenation is dangerous
TL;DR: Eventually, stuff will fail. Concatenation will just make things fail harder.
Concatenation is bad for caching
But now you need to fix something. As usual, you work on your code, and re-bundle all your scripts. Then you push.
Since your bundle.js is actually a new file (fingerprinted with a new MD5 hash), the cache is invalidated.
Every time you concatenate your files into a single bundle, you force users to re-download the entire bundle every time you make a change no matter how tiny.
Say hello to HTTP/2
Concatenating your files used to serve the purpose of reducing HTTP requests. Under HTTP/1, downloading one big file will (almost always) be faster than performing many requests to download multiple smaller files.
This is not the case with HTTP/2, where requests are very cheap. This is mainly because of the protocol’s ability to re-use connections, compress headers and multiplex.
But… not so fast
While caching improves with multiple files, compression usually gets worse. Because of how compression algorithms work, they usually do much better on large, monolithic files than smaller ones. That means you are now serving bigger files.
This needs to be tested on a case by case basis. If you are serving hundreds of multiple files, you may want to bundle them in smaller chunks. For a couple dozen, it probably won’t be worth the hassle.
Can I Use HTTP/2 today?
At the time of writing this article, HTTP/2 has over 77% global support. It’s also backwards compatible, so the short answer is yes, you can get started with HTTP/2 today.
So what about those browsers that don’t support HTTP/2?
Slow is always better than broken. And HTTP/2 is not a magic bullet either. You still want to take advantage of other web performance techniques out there. For example: some browsers that don’t support HTTP/2 do have support for other “modern” features like resource hints.
Join my newsletter and get articles like this delivered straight into your inbox.