Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preload all js bundles required for a specific route #26484

Closed
nathan-nusign opened this issue Nov 17, 2023 · 7 comments · Fixed by #28919
Closed

Preload all js bundles required for a specific route #26484

nathan-nusign opened this issue Nov 17, 2023 · 7 comments · Fixed by #28919
Assignees
@alan-agius4
Labels
angular/build:application area: @angular/build area: @angular/ssr feature: in backlog Feature request for which voting has completed and is now in the backlog feature Issue that requests a new feature

Comments

@nathan-nusign
Copy link

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
@JeanMeche JeanMeche transferred this issue from angular/angular Nov 24, 2023
@angular-robot angular-robot bot added the feature: votes required Feature request which is currently still in the voting phase label Nov 24, 2023
@angular-robot Angular Robot
Copy link
Contributor

angular-robot bot commented Nov 24, 2023

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
Copy link

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 Angular Robot
Copy link
Contributor

angular-robot bot commented Jan 3, 2024

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.

@angular-robot angular-robot bot added feature: under consideration Feature request for which voting has completed and the request is now under consideration and removed feature: votes required Feature request which is currently still in the voting phase labels Jan 20, 2024
@alan-agius4 alan-agius4 mentioned this issue Aug 30, 2024
Closed
@jkrems jkrems self-assigned this Sep 30, 2024
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
c43f197 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
@alan-agius4 alan-agius4 mentioned this issue Nov 21, 2024
Merged
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
95f2b19 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
9b4c01a 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
a84ba7d 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
6d62cb0 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
be14f78 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 21, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
913f62e 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 22, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
1eb3c20 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 25, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
4cb8cf5 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 27, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
18d0d35 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
0713e4c 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
5894bb9 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
4c645a0 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
97607df 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
8f4b6ee 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
80c7baa 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 29, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
212ad1a 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 2, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
d78d2ad 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 3, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
7829488 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 3, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
9524778 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 3, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
52500d9 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 3, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
59e3579 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 4, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
86e0be8 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 4, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
509feb7 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 4, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
b15ae1f 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
@alan-agius4 alan-agius4 added feature: in backlog Feature request for which voting has completed and is now in the backlog and removed feature: under consideration Feature request for which voting has completed and the request is now under consideration labels Dec 5, 2024
@alan-agius4 alan-agius4 self-assigned this Dec 5, 2024
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 6, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
4281f58 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 8, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
572c1a0 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 10, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
31ff83a 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes angular#26484
alan-agius4 added a commit that referenced this issue Dec 10, 2024
@alan-agius4
feat(@angular/ssr): add modulepreload for lazy-loaded routes
8d7a51d 
Enhance performance when using SSR by adding `modulepreload` links to lazy-loaded routes. This ensures that the required modules are preloaded in the background, improving the user experience and reducing the time to interactive.

Closes #26484
@naveedahmed1
Copy link

naveedahmed1 commented Dec 11, 2024 •
edited
Loading

@alan-agius4 what if in case of server side, it also create HTTP 103 Early Hints while generating modulepreload links? These could be added to ResponseInit as early hints headers.

@alan-agius4
Copy link
Collaborator

Early Hints are something we want to explore further. However, we need to be cautious about adding Early Hints as similar to modulepreload links 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
Copy link

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 11, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
angular/build:application area: @angular/build area: @angular/ssr feature: in backlog Feature request for which voting has completed and is now in the backlog feature Issue that requests a new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(@angular/ssr): add modulepreload for lazy-loaded routes alan-agius4/angular-cli
4 participants
@jkrems @naveedahmed1 @alan-agius4 @nathan-nusign