ui icon indicating copy to clipboard operation
ui copied to clipboard

How can I tree-shake reka-ui?

Open phtngyn opened this issue 9 months ago • 13 comments

Description

I am using the Nuxt UI playground template from here.

After running pnpm build, I noticed that .output/server/node_modules/reka-ui/dist contains many unused components. How can I configure it to tree-shake these unused components after the build?

phtngyn avatar Feb 22 '25 10:02 phtngyn

I can confirm this is a real problem. Official starter template when loaded loads more that 700 modules for a page with one button. This makes whole DX a nightmare - HMR lags for 3-5 seconds, fresh reloads re-downloads whole bunch of modules.

I am not sure this is nuxt-ui/reka's thing or a vite's, but this makes our flow a lot harder.

15MB of modules for a page with a button seems definitely broken. Image

P.S. Production builds are totally fine - components are tree-shaked and only used appears in bundle.

qodeboy avatar Jun 05 '25 17:06 qodeboy

I see this as well.

gurgeous avatar Jun 08 '25 04:06 gurgeous

This is so far an upstream issue related to Vite not treeshaking the module in development, you can refer to this issue: https://github.com/vitejs/vite/issues/8237

Apparently, this will be fixed once Vite migrates to Rolldown.

atinux avatar Jun 10 '25 16:06 atinux

This makes total sense. But the fun part is I have tried with experimental https://github.com/vitejs/rolldown-vite and found no difference at all - still tons of bundles being loaded.

But the strange part that is more likely to be related to nuxt/nuxt-ui - is why modules that are not even used on the page (in the userland code at all) are being included and served. On my screenshot you can see that i.e. AlertDialog and related components are loaded - but never used/imported in userland code.

My silly assumption was it is due to autoImports - and I have tried to completely disable it. With no luck either.

qodeboy avatar Jun 10 '25 17:06 qodeboy

I also tried the Rolldown fork but no difference. Someone from the upstream Vite issue says switching to something like Rsbuild could help so i will try that #8237

grous0 avatar Jul 08 '25 18:07 grous0

Please share your findings if you can make rspack work for you, because it fails for me even on simple fresh nuxt + nuxt-ui project.

Pavlo Sheiman, email: @.***

вт, 8 лип. 2025 р. о 20:37 Ömer @.***> пише:

grousk left a comment (nuxt/ui#3376) https://github.com/nuxt/ui/issues/3376#issuecomment-3049940513

I also tried the Rolldown fork but no difference. Someone from the upstream Vite issue says switching to something like Rsbuild could help so i will try that #8237 https://github.com/vitejs/vite/issues/8237#issuecomment-2957067297

— Reply to this email directly, view it on GitHub https://github.com/nuxt/ui/issues/3376#issuecomment-3049940513, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEEVXPK2GYUBD3XEYXGB5L3HQFWHAVCNFSM6AAAAABXU2WRZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTANBZHE2DANJRGM . You are receiving this because you commented.Message ID: @.***>

qodeboy avatar Jul 08 '25 18:07 qodeboy

Please share your findings if you can make rspack work for you, because it fails for me even on simple fresh nuxt + nuxt-ui project.

Pavlo Sheiman, email: @.***

вт, 8 лип. 2025 р. о 20:37 Ömer @.***> пише:

So Rsbuild has no compatibility for Vite plugins. I checked Rsbuild and Vite's plugin APIs and it is just very different so i can't do anything with it.

grous0 avatar Jul 08 '25 18:07 grous0

I was wondering if anyone has solved this problem yet?

ii517 avatar Aug 15 '25 03:08 ii517

We all are waiting for rolldown here. For my case I was able to go from ~1200 modules to ~400 modules by disabling all auto-importing crap and fine-tuning vite's optimizeDeps.

On Fri, Aug 15, 2025 at 5:44 AM JinyLin @.***> wrote:

ii517 left a comment (nuxt/ui#3376) https://github.com/nuxt/ui/issues/3376#issuecomment-3190520390

Has anyone solved this problem yet?

— Reply to this email directly, view it on GitHub https://github.com/nuxt/ui/issues/3376#issuecomment-3190520390, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEEVXO3YWOHXQBSHB5PWGL3NVJSBAVCNFSM6AAAAABXU2WRZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCOJQGUZDAMZZGA . You are receiving this because you commented.Message ID: @.***>

-- Pavlo Sheiman, email: @.***

qodeboy avatar Aug 15 '25 08:08 qodeboy

We all are waiting for rolldown here. For my case I was able to go from ~1200 modules to ~400 modules by disabling all auto-importing crap and fine-tuning vite's optimizeDeps.

On Fri, Aug 15, 2025 at 5:44 AM JinyLin @.***> wrote: ii517 left a comment (nuxt/ui#3376) <#3376 (comment)>

Has anyone solved this problem yet?

— Reply to this email directly, view it on GitHub <#3376 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEEVXO3YWOHXQBSHB5PWGL3NVJSBAVCNFSM6AAAAABXU2WRZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCOJQGUZDAMZZGA . You are receiving this because you commented.Message ID: @.***>

-- Pavlo Sheiman, email: @.***

Good to know, thanks

ii517 avatar Aug 15 '25 08:08 ii517

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

github-actions[bot] avatar Nov 07 '25 02:11 github-actions[bot]

Don't close, shake it!

gurgeous avatar Nov 07 '25 03:11 gurgeous

Yes please treeshaking is a basic. 🙏

Yves852 avatar Nov 07 '25 14:11 Yves852