perf(vite): remove duplicate css links from rendered page when inlined

[danielroe]

🔗 Linked issue

resolves nuxt/nuxt#14792

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This improves the performance of inlining styles in SSR. We can complete remove styles from the manifest for individual/non-entry chunks, as we always know that these will be inlined. For entry CSS, it's a little more complex. Client-only components may have their CSS in the entry file, so we can't entirely exclude entry CSS. (And we deliberately tree shake client-only components from the server build.) I have lowered entry CSS priority via prefetching it; vite's preload helper then loads it.

Note: I think this is soluble, but it may require a secondary PR, which will also need to stop vite from preloading the entry css...

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	3b87c19
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6318582eca81820009e0a3d6
😎 Deploy Preview	https://deploy-preview-7264--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[pi0]

What will happen for a component with ssr inline syle enabled when rendering in hybrid/spa mode?

[danielroe]

Rendering in hybrid/spa mode would not be adding a <link> for the CSS that is specific to the page anyway (as ssrContext.modules would be empty). So there would be no change from these lines (L127-133).

However, there would be a change to the entry CSS, which would be prefetched and then loaded on client-side rather than preloaded. (This would have a negative performance impact.)

-   <link rel="preload" as="style" href="/_nuxt/entry.6e3e3577.css">
-   <link rel="stylesheet" href="/_nuxt/entry.6e3e3577.css">
+   <link rel="prefetch stylesheet" href="/_nuxt/entry.6e3e3577.css">

Note that this also has a negative impact for client-only components for SSR pages. We could disable L135-R143, and though we would have double-loaded entry CSS values, we would not have any negative perf impact for client-side/or hybrid spa:

https://github.com/nuxt/framework/pull/7264/files#diff-9659ec6cc10298d2e39de216bea87573d29efdb58b9fd2e8fc9fc4404719bcaaR135-R143

[DamianGlowala]

I've tracked the PR which breaks my existing project and this one does it. There's an infinite refresh of the page with 'Reloading server...' message and a console log (undefined) in the terminal. Will provide any additional info if needed.

[harlan-zw]

I haven't looked into it too much but something in RC.10 is causing this issue windicss/nuxt-windicss#180, this PR seems like a likely candidate.

Any ideas before I dig into it?