Styles get added both inline and by reference and precede JS files
TheDutchCoder opened this issue · comments
Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: npm@10.2.3
- Builder: -
- User Config: devtools
- Runtime Modules: -
- Build Modules: -
Reproduction
https://stackblitz.com/edit/github-kz3fe2?file=components%2FMyComponent.vue
Describe the bug
When using scoped CSS (might also be without scoped, haven't tried), there's a problem after building:
- The CSS for the component gets added inline and as a
<link> - All the CSS files are declared before the JS files, instead of after (in Nuxt 2 JS files came first, so the browser can start loading them async).
#2 is not a direct problem, because browsers don't wait for the CSS to load in order to start loading JS, but since the JS is preloaded, it might still be better to hoist them above CSS?
Additional context
We discovered this while profiling our project in production and saw some odd results from Lighthouse, complaining about render blocking CSS.
We then noticed that almost all of the CSS was loaded twice (once inline, and once through <link>s).
The order was also reversed from Nuxt 2, even though that might not be so much of a bug.
Comparing the Lighthouse feedback from Nuxt 2 to Nuxt 3 (in our prod app), a few things are striking:
- In Nuxt3: all the stylesheets are marked as "A late network request adjusted the page layout", whereas in Nuxt 2 this doesn't happen.
- None of the css files are marked as preload in Nuxt 3, whereas they are in Nuxt 2
Logs
No response
