Decreasing bundle size

[Jonas-C]

Hi! At the time of writing, our usage of zag results in about a 400kb increase to our bundle size. The combobox package on its own is only a bit smaller than the entirety of headlessui/react. Are there any plans to decrease the bundle size?

[segunadebayo]

Zag.js ships the dist and src files (for better debugging experience) hence the perceived size.

I’m sure you know that Bundlephobia isn’t a correct measure of bundle size. Can you share a bundle size analyzer result here?

If you’re relying on Ark, I recommend using a sub path import instead of importing from the root package.

Import { Combobox } from ark-ui/react/combobox

[Jonas-C]

Sorry for the late reply! Ark seems to tree-shake just fine regardless of how we import it. It comes in at around 75kb uncompressed.

For reference, zag is at 389kb uncompressed. We only import zag indirectly from ark. I'm assuming the issue (if there is an issue) is either in arks usage of zag, or zag directly. The bundle analyzer results for the "combobox" file from zag is just about equal to the file size I get when compiling zag locally (0.5kb smaller in my bundle). Is it possible that it's actually tree-shaken?

[alisd23]

It's possible that this is not a bug, but just the fact that these libraries are quite hefty. Specifically for the Combobox (but I assume the same for many others), from what I can see:

1. Most of the logic is in zag-js anyway, defined by the state machine stuff, which is why the uncompressed versions are much larger.
2. Maybe the way the state machines are written (maybe JS state machines in general) are not very minifiable due to a lot of literal strings in the code, and object keys that cannot be minified? Not super familiar with minification but that's my theory.

For the components I'm using (maybe 50-75%), when gzipped, my zag combobox file is around 6-7kB, which doesn't sound like much, but zag-js in total is around 55kB gzipped, which is pretty large. Plus ark at 13kB and Chakra at around 60kB. Chakra at 60kB surprised me because all the logic is in zag-js/ark-ui - maybe that is due to all the tokens and styles definitions, which can't be minified (but those are replacing CSS files anyway).

The total gzipped is around 130kB, which is pretty huge (React DOM is around 50kB minified).

Not sure what can be done about this but thought I'd leave this for other people wondering.