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

Open
nathan-nusign opened this issue Nov 17, 2023 · 3 comments · May be fixed by #28919
Open

Preload all js bundles required for a specific route #26484

nathan-nusign opened this issue Nov 17, 2023 · 3 comments · May be fixed by #28919
Labels
angular/build:application area: @angular/build area: @angular/ssr feature: under consideration Feature request for which voting has completed and the request is now under consideration 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 linked a pull request Nov 21, 2024 that will close this issue
Open
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular/build:application area: @angular/build area: @angular/ssr feature: under consideration Feature request for which voting has completed and the request is now under consideration 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