You probably don't need to bundle the resources for your website

Published on 09/04/2025

Many people think that bundling improves the performance because it reduces the number of the requests, and the fewer requests are done, the faster is the page load. Please don't confuse bundling with minification. You can and probably need to minify individual files. Bundling is about combining multiple files into one file. Here I will list reasons why bundling oftentimes causes more harm than good.

HTTP/2 and multiplexing

In order to understand why nowadays bundling is oftentimes more harmful, we must understand how the browsers are making requests under the hood.

Browsers are mainly using the HTTP protocol for doing requests and communicating with the server. The HTTP protocol in turn is based on the TCP protocol, and the latest HTTP/3 protocol is based on the UDP protocol which is even faster, because UDP doesn't enforce checks on whether the recipient received the data or not. Both TCP and UDP are provided by the operating system and are the lowest level network protocols that the applications can use.

HTTP/2 introduced multiplexing which allows to use only one TCP (or UDP starting from HTTP/3) session (or socket) for fetching multiple files. This means even if the browser fetches many files, it will initiate only one connection.

Inside one connection the browser may prioritize which resources to load first, thus improving the page load performance.

How is bundling harmful

Now it's becoming clearer why bundling oftentimes does more harm than good. One major reason is that browsers can cache the individual files. Let's say some website has 2 pages:

1. The page 1 uses scripts A.js, B.js, C.js.
2. The page 2 uses scripts B.js, C.js,D.js.

If every individual page has its own bundle, (i.e. The page 1 will load the bundle A+B+C.js and page 2 will load the bundle B+C+D.js), on the page 1 the browser will effectively load the scripts A.js, B.js, C.js and then when opening the page 2 the browser will effectively load the scripts B.js, C.js, D.js. So the scripts B.js, C.js are loaded twice which could be avoided. This will be slower and waste more network bandwidth (especially mobile network).

But if the scripts are not bundled the browser will cache scripts A.js, B.js, C.js on page 1 and only load D.js on page 2. Also this theoretically allows to apply or execute some resources earlier (for example compiling/parsing the loaded scripts in background while loading other resources) which will improve the performance and user experience.

Bundling is sometimes a better choice

That being said, bundling can sometimes be better when the files are too small and too many. For example, it turns out that the compression ratio is higher for big files. So you still need to do some optimizations for very small resources. I don't think an experienced developer will load hundreds of 1KB separate icons instead of combining them into 1 file. Only from large enough files (> 100KB) it's probably starting to do more harm than good.

Also, especially when using full blown frameworks and transpilation, it's complicated if not impossible to fully eliminate bundling by splitting the code into smaller pieces. This sometimes requires architectural adjustments, such as splitting the web app into modules or doing lazy loading for some parts of the application.