Why bundle optimizations are no longer a concern in HTTP/2

Question

I read in bundling parts of systemjs documentation that bundling optimizations no longer needed in HTTP/2:

Over HTTP/2 this approach may be preferable as it allows files to be individually cached in the browser meaning bundle optimizations are no longer a concern.

My questions:

1. It means we don't need to think of bundling scripts or other resources when using HTTP/2?
2. What is in HTTP/2 which makes this feature enable?

Answer 1

The bundling optimization was introduced as a "best practice" when using HTTP/1.1 because browsers could only open a limited number of connections to a particular domain.

A typical web page has 30+ resources to download in order to be rendered. With HTTP/1.1, a browser opens 6 connections to the server, request 6 resources in parallel, wait for those to be downloaded, then request other 6 resources and so forth (or course some resource will be downloaded faster than others and that connection could be reused before than others for another request). The point being that with HTTP/1.1 you can only have at most 6 outstanding requests.

To download 30 resources you would need 5 roundtrips, which adds a lot of latency to the page rendering.

In order to make the page rendering faster, with HTTP/1.1 the application developer had to reduce the number of requests for a single page. This lead to "best practices" such as domain sharding, resource inlining, image spriting, resource bundling, etc., but these are in fact just clever hacks to workaround HTTP/1.1 protocol limitations.

With HTTP/2 things are different because HTTP/2 is multiplexed. Even without HTTP/2 Push, the multiplexing feature of HTTP/2 renders all those hacks useless, because now you can request hundreds of resources in parallel using a single TCP connection.

With HTTP/2, the same 30 resources would require just 1 roundtrip to be downloaded, giving you a straight 5x performance increase in that operation (that typically dominates the page rendering time).

Given that the trend of web content is to be richer, it will have more resources; the more resources, the better HTTP/2 will perform with respect to HTTP/1.1.

On top of HTTP/2 multiplexing, you have HTTP/2 Push.

Without HTTP/2 Push, the browser has to request the primary resource (the *.html page), download it, parse it, and then arrange to download the 30 resources referenced by the primary resource.

HTTP/2 Push allows you to get the 30 resources while you are requesting the primary resource that references them, saving one more roundtrip, again thanks to the HTTP/2 multiplexing.

It is really the multiplexing feature of HTTP/2 that allows you to forget about resource bundling.

You can look at the slides of the HTTP/2 session that I gave at various conferences.