feat(nuxt): prefetch middleware/layouts + await layout loading #10155
Conversation
|
|
| if (layout && typeof layouts[layout] === 'function') { | ||
| layouts[layout]() | ||
| } |
There was a problem hiding this comment.
At the moment, this is only imported in <NuxtLayout> which means layout files are not bundled unless a layout is actually used. I wonder if we can move this elsewhere (maybe first use of <NuxtLayout> triggers hook registration?)
If not, I think it's a reasonable trade-off given the very nice improvement in this PR.
There was a problem hiding this comment.
You mean importing the build/layouts will make the creation of the chunks?
i think it’s fine if they are always created IMO
we could also check if we have layouts defined but NuxtLayout is never used (I experienced this, layouts but forgot to use the NuxtLayout component in app.vue and got no warnings)
There was a problem hiding this comment.
It's a nice idea! Only scenario I can think of where it would be a pain is when you have a theme that provides layouts but the end project doesn't want to use any of them. Or if <NuxtLayout> is only being used within a page and only on some of the site. (But still I think the warning would be fine.)
(I don't think it has to be in this PR though.)
danielroe
changed the title
|
I don't know if it's related, but this looks similar nuxt/nuxt#14860 just with nested routes instead of layouts and it's been like this for a while. Could you check if this pull fixes it or address it in general? |
|
Testing on edge would be very welcome @Luffyyy 🙏 |
❓ Type of change
📚 Description
Hooked into
link:prefetchto prefetch the layouts and middleware 🚀I also forced thge prefetching of layout on route navigation (not needed to depend on Suspense) like I did on Nuxt 2, this way we don't change the page until the layout if fully resolved.
Before (slow 3g):
CleanShot_2023-01-18_at_16.48.00.mp4
After (slow 3g):
CleanShot_2023-01-18_at_16.54.31.mp4