Why bundle optimizations are no longer a concern i

问题:

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?

回答1:

HTTP/2 supports "server push" which obsoletes bundling of resources. So, yes, if you are you using HTTP/2, bundling would actually be an anti-pattern.

For more info check this: https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/

回答2:

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.

回答3:

Bundling is still useful if your website is

1. Served on HTTP (HTTP 2.0 requires HTTPS)
2. Hosted by a server that does not support ALPN and HTTP 2.
3. Required to support old browsers (Sensitive and Legacy Systems)
4. Required to support both HTTP 1 and 2 (Graceful Degradation)

There are two HTTP 2.0 features that makes bundling obsolete:

1. HTTP 2.0 Multiplexing and Concurrency (allows multiple resources to be requested on a single TCP connection)
2. HTTP 2.0 Server Push (Server push allows the server to preemptively push the responses it thinks the client will need into the client's cache)

PS: Bundling is not the lone optimization technique that would be eliminated by the insurgence of HTTP 2.0 features. Features like image spriting, domain sharding and resource inlining (Image embedding through data URIs) will be affected.

How HTTP 2.0 affects existing web optimization techniques

回答4:

Bundling is doing a lot in a modern JavaScript build. HTTP/2 only addresses the optimisation of minimising the amount of requests between the client and server by making the cost of additional requests much cheaper than with HTTP/1

But bundling today is not only about minimising the count of requests between the client and the server. Two other relevant aspects are:

• Tree Shaking: Modern bundlers like WebPack and Rollup can eliminate unused code (even from 3rd party libraries).
• Compression: Bigger JavaScript bundles can be better compressed (gzip, zopfli ...)

Also HTTP/2 server push can waste bandwidth by pushing resources that the browser does not need, because he still has them in the cache.

Two good posts about the topic are:

• http://engineering.khanacademy.org/posts/js-packaging-http2.htm
• https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/

Both those posts come to the conclusion that "build processes are here to stay".