Preload all js bundles required for a specific route

[nathan-nusign]

Which @angular/* package(s) are relevant/related to the feature request?

platform-server

Description

When loading a route, the browser downloads the HTML file, then the main.js file, and only after that it loads other files that are required by the main js file, for example, a component that is lazy loaded using loadComponent in the router.

Proposed solution

I think there is an opportunity to use the fact that SSR already had to render the page, so should know which bundles are required for this route. If the bundles can be identified, then they could be preloaded (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload) so that the browser can download all of the js files that are required to render the page at the same.

Alternatives considered

N/A

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[naveedahmed1]

It would be great, adding link preload tags for such script will also allow CDNs such as Cloudflare to automatically generate the Early Hints, which can further improve the performance. Ref: https://developers.cloudflare.com/pages/platform/early-hints/#2-automatic-link-header-generation.

I would say that cli should generate preload tags for the css file and the main javacript bundles as well. So that CDNs can generate Early Hints for these resources as well.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.