How to decide which files can I push with HTTP 2 Server Push when hosting an Angular App with differential loading?

Question

I have an Angular 8 app, which by default generates 2 js files for each bundle, ES5 and ES6 versions. I would like to leverage HTTP Push, but I don't know which version to push.

Is it possible to somehow find out from the request which bundles should I push.

From here it seems like a safe choice to push ES6 version for all browsers except IE. Is there a better logic? How can I detect whether IE is in use?

EDIT:

I fully understand how Angular differential loading is working, the problem is that it is controlled by the browser by deciding which resource to fetch from the offered versions. Now with HTTP Server Push, one must decide which resources to push to the client along with index.html , ie before the browser parses the file and chooses a js file version. More on Server Push (via Nginx).

So if I push a version that will not be used later, then instead of shortening load time I end up increasing it by making the browser download both versions.

Answer 1

To do so you can enable angular's differential loading feature. Which will allow you to generate dist code in both ES5 and ES6. This way ES5 code will be loaded if some legacy browser do not support the ES6. For more info please go here

I hope this helps you. Let me know if you got any other questions.

Answer 2

• Angular CLI understands browsers support range from browserslist configuration.
• If the application needs to support ES5 browsers and TypeScript target is higher than es5, the CLI automatically makes additional bundles for compatibility.
• browserslist is the single source of truth, so es5BrowserSupport will be deprecated.

"Differential Loading", It allows us to get free from considering browser compatibility of application.