Compare HTTP/1.1, HTTP/2 and HTTP/3. What do they change for how you bundle frontend assets?

Each version reduces the cost of many requests. So you no longer need to bundle everything into a few big files.

HTTP/1.1 handles one request at a time per connection. Browsers open about six connections per host, and other requests wait in a queue. This led to hacks:

• concatenating all files into one
• image sprites (many icons in one image)
• domain sharding (spreading files across several domains to get more connections)

HTTP/2 multiplexes many requests over one TCP connection. Multiplexing means the requests share one connection at the same time, like several conversations on one phone line. HTTP/2 also compresses headers and allows prioritisation. But it has a problem called TCP head-of-line blocking. If one TCP packet is lost, every stream on the connection waits until it is resent, like a whole queue stuck behind one slow person.

HTTP/3 runs over QUIC, which is built on UDP. Its streams are independent, so a lost packet only affects one stream. It also combines the connection and TLS (encryption) handshakes, so setup is faster. And it handles network changes better, for example moving from Wi-Fi to mobile data.

What this means for bundling:

• Many requests are no longer expensive.
• Sharding and sprites are unnecessary.
• You can split code into more chunks, for better caching.
• But don't ship hundreds of tiny modules. Each one has overhead, and compression works better on larger files.