Repository navigation
Preload all js bundles required for a specific route #26484
Description
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
Activity
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
feat(@angular/ssr): add `modulepreload` for lazy-loaded routes
naveedahmed1 commentedon Dec 11, 2024
@alan-agius4 what if in case of server side, it also create
HTTP 103 Early Hintswhile generatingmodulepreloadlinks? These could be added to ResponseInit as early hints headers.alan-agius4 commentedon Dec 11, 2024
Early Hints are something we want to explore further. However, we need to be cautious about adding Early Hints as similar to
modulepreloadlinks they can negatively impact performance.For example, in the case of SSR, we may prefer prioritizing the download of images over JavaScript to avoid conflicts that could impact Core Web Vitals.
naveedahmed1 commentedon Dec 11, 2024
Have you done any experiments with early hints? In our case, using our custom implementation we add early hints for:
stylesheet
eager loaded images
polyfills
main
modulepreload
And it in fact it improved the CWV. Whats your observation?
angular-automatic-lock-bot commentedon Jan 11, 2025
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.