search

kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.16k stars 54 forks source link

Kobalte dependency size #274

Open ignatz opened 9 months ago

ignatz commented 9 months ago

Hi Fabien,

let me start saying that I love Kobalte. It's hands down the best headless UI framework for solid.

Let me further disclaim that this is more an observation than a bug report. I simply noticed that adding a simple UI component added a lot of javascript even in production builds post tree-shaking. I did see the other issue about potentially breaking kobalte. But I believe this is not necessarily the issue here. I also dug a bit into the final bundle and the bundler shook well.

So, how much is "a lot". I ran a quick experiment by starteing a new solidjs template and adding the Popover component. I picked it because it seemed on the lighter side with not too many internal kobalte cross-component deps.... 107KB

Before:

dist/index.html                 0.46 kB │ gzip: 0.30 kB
dist/assets/solid-123b04bc.svg  1.60 kB │ gzip: 0.55 kB
dist/assets/index-613f2455.css  1.24 kB │ gzip: 0.64 kB
dist/assets/index-f2141da9.js   8.60 kB │ gzip: 3.63 kB

after:

dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/solid-123b04bc.svg    1.60 kB │ gzip:  0.55 kB
dist/assets/index-4910d9de.css    2.57 kB │ gzip:  1.10 kB
dist/assets/index-f5d4aca8.js   115.17 kB │ gzip: 38.98 kB

I wanted to contrast my result with radix, so I did the same thing: started an empty nextjs template and added radix popover....

before:

  Route (pages)                              Size     First Load JS
┌ ○ /                                      5.43 kB        84.6 kB

after

Route (pages)                              Size     First Load JS
┌ ○ /                                      26.8 kB         106 kB

i.e. only some 22kb or, in other words, 20% of what kobalte's popover added.

I'm not pointing fingers. I love kobalte and radix had a head start. There's also a risk that I'm merely holding it wrong... either way, I'm curious to hear your thoughts.

Cheers

AzrizHaziq commented 8 months ago

I was also in same page with @ignatz . Currently using vite dev and whenever hit save, it re-download almost 300+ js. If anyone can share some work-around please let me know 😄 . (i'm using solid-start)

Anyway, huge thanks for the awesome work!.

image

ignatz commented 8 months ago

There's already a PR floating around to improve the dev experience, so fear not. My issue was specifically regarding prod bundle size.