optimisations for prefetching chunks
See original GitHub issueCurrently dynamic imports include things like routes, error components, and any global components (so if using with @nuxt/content
). I am very concerned to decrease HTML and number of prefetched resources but if we simply disable prefetching, sites will seem much slower.
From my point of view, before removing current prefetch behaviour, we need the ability to make some finer-grained decisions.
A set of suggestions:
-
prefetch
support via NuxtLink (https://github.com/nuxt/framework/pull/4329) - programmatic prefetching of routes: https://github.com/nuxt/framework/issues/3649
- remove page chunks from dynamic imports in manifest,
or smartly add ‘sibling’ pages: https://github.com/nuxt/framework/pull/6662 - programmatic prefetching of global components: https://github.com/nuxt/framework/pull/6661
-
(optionally) add a plugin to update manifest so that the components that might use global components are the ones that have the dynamic import registered -
add hook for user to manipulate client manifest - (possibly) add ability for user to customise
vue-bundle-renderer
options - see https://github.com/nuxt/framework/pull/6210#discussion_r937950236.
Issue Analytics
- State:
- Created a year ago
- Reactions:10
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Prefetch - Patterns.dev
Prefetch ( <link rel="prefetch"> ) is a browser optimization which allows us to fetch resources that may be needed for subsequent routes or...
Read more >Improving Index Performance through Prefetching
This paper proposes and evaluates Prefetching B+-Trees pB+-Trees , which use prefetching to accelerate two im- portant operations on B+-Tree indices: searches ...
Read more >Front-End Performance 2021: Build Optimizations
Are you using predictive prefetching for JavaScript chunks? We could use heuristics to decide when to preload JavaScript chunks. Guess.js is a ...
Read more >The Performance Optimization of Threaded Prefetching for ...
Helper threaded prefetching based on Chip Multiprocessor is a well known approach to reducing memory latency and has been explored in linked ...
Read more >Optimizing Computer Runtime Using Data Prefetching and ...
Most high-level language compilers offer options as to what type of code to generate at compile time. A few options are optimization for...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I believe this to be related: https://github.com/nuxt/framework/discussions/9463
As you can see in that discussion, simply removing prefetch tags from my app increases its Lighthouse score by 20%. And I can tell you the app feels and loads faster as well in use.
If developers could gain access to
shouldPrefetch
andshouldPreload
, that would really help in ginormous applications like mine where prefetch actually leads to performance loss instead of gain.Thanks for explaining your use case @kosmeln. Prefetching is not causing any issue but simply reveals a side-effect issue of not using scoped styles in layouts. Using style prefixes is not a workaround but a proper way to write global styles that ensure they don’t conflict.
I would be more than happy to continue this conversation to investigate different solutions we might provide for this. If you would, please open a discussion and elaborate more about site builder use-case that ends up with dozens of layouts.
BTW in Nuxt 3, we have a much better solution for theming and shared code for multi sites depending on same code base but slight changes. It is called extends.