Nuxt 3 prefetch all assets from every pages and every layouts.

Environment

Nuxt CLI v3.0.0-rc.0 Nuxt project info:

---

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.0
• Package Manager: npm@8.3.1
• Builder: vite
• User Config: css
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/kstraszewski/nuxt3-playground/tree/prefetching-all-assets

Also we have qa version of our project here: https://b2c.qa2.lendi.pl/design

Describe the bug

Nuxt after build prefetch all the assets like CSS, fonts, media, imgs from all the pages and all the layouts. As you can see in the repo example you have /pageA which implement layout-a, with some video in the pageA.vue. Also, you have /pageB which implements layout-b which loads popular @mdi/font.

The problem I have is it doesn’t matter on which page you go nuxt always loads all the assets. When you go to /pageA you will see the mdi fonts from pageB and layoutB also are prefetching by the nuxt:

PageA:

PageB:

Both pages Loads a lot.

My guess is that vite builder prefetch every URL that he find in CSS or template.

Additional context

It makes nuxt unusable in production mode because It hurts LCP very badly:

As you can see on the example below we have huge LCP (I’ve made some tricks witch mdi/fonts, but this is very ugly solution) with fully loaded mdi/fonts I’ve received 27 sec of LCP.

https://pagespeed.web.dev/report?url=https%3A%2F%2Fb2c.qa2.lendi.pl%2Fdesign

Logs

No response

[kosmeln]

We can’t wait to see this fixed sooner! Fingers crossed!

[danielroe]

There is a difference between preload and prefetch. There is an issue awaiting review that prevents over-zealous prefetching: https://github.com/nuxt-contrib/vue-bundle-renderer/pull/30.

There is another issue which is that the vite manifest that is built includes too many assets as direct dependencies of the entry point.

Yes, this is planned to be resolved. Likely we need to merge https://github.com/nuxt/framework/pull/5398 first.