Auto imported component's style is loaded even if I don't use component

[jd-solanki]

Environment

- Operating System: `Darwin`
- Node Version:     `v16.13.0`
- Nuxt Version:     `3.0.0-27274229.29599f0`
- Package Manager:  `yarn@1.22.17`
- Bundler:          `Vite`
- User Config:      `alias`, `buildModules`, `css`, `vite`
- Runtime Modules:  `-`
- Build Modules:    `@vueuse/core/nuxt@6.8.0`, `unplugin-icons/nuxt`, `~/@core/layouts/nuxt`

Reproduction

https://codesandbox.io/s/determined-sky-77qrl?file=/app.vue:19-43

Describe the bug

Nuxt 3 docs state "It will automatically import the components only if used".

Does components placed inside component dir is registered globally?

If the component is only get imported then why style is loaded even if the component is not used.

In this codesandbox: https://codesandbox.io/s/determined-sky-77qrl?file=/app.vue:19-43

I don't use the custom button component but still, the style from that component is loaded? 🤔

Additional context

No response

Logs

No response

[productdevbook]

some problem

[pi0]

/cc @antfu. I think issue is that styles are eagerly loaded for lazy imported components

[antfu]

Is this only happens on dev?

[productdevbook]

Is this only happens on dev?

@antfu no, dev + (build + start) two problem

[productdevbook]

some vue component 4 copy add header :D

[antfu]

Fixes:

• fix(vite): separate dynamic deps in dev-bundler framework#2067
• fix: only prefetch dynamic entries nuxt-contrib/vue-bundle-renderer#19

[antfu]

Bring back by nuxt/framework#2227

[psycongaroo]

bump
any news about that?

[pi0]

/cc @antfu

[danielroe]

Also see #13778.

[HochinChan]

Are there any solutions? I had the same problem.😭

[danielroe]

@HochinChan Your situation is not related, I think. I would recommend not using global components for exactly these kind of performance reasons, but instead to rely on Nuxt to auto-import them where required. You can track #14584 for more prefetching improvements.

[danielroe]

Reproduction with latest Nuxt: https://stackblitz.com/edit/github-nd6mk4.

[HochinChan]

Reproduction with latest Nuxt: https://stackblitz.com/edit/github-nd6mk4.

https://stackblitz.com/edit/nuxt-starter-eyapnx

When I access pages/index (without using any components), the styles of all the components and the styles of other pages are also loaded

[danielroe]

That should no longer be the case for pages on the edge channel, but yes, that was the purpose of my reproduction link - to show the issue.

[HochinChan]

That should no longer be the case for pages on the edge channel, but yes, that was the purpose of my reproduction link - to show the issue.

Sorry, I'm not quite sure what you mean, but I was wondering how to make it load only the style of the current page

[danielroe]

Use https://v3.nuxtjs.org/guide/going-further/edge-channel. See nuxt/framework#6662. It will still load component styles; that's what this issue is about. But it won't load page styles.

[HochinChan]

Use https://v3.nuxtjs.org/guide/going-further/edge-channel. See nuxt/framework#6662. It will still load component styles; that's what this issue is about. But it won't load page styles.

I see, thanks. The other page styles won't load when I use @latest.

[pi0]

We are working to make preload/prefetch smarter. Let's track the issue of global components in #14675. If there is any extra prefetch/preloading issue not caused by usage of global components please make another new issue with reproduction 🙏🏼