react-dropdown-menu is bigger than other similar packages

[iampava]

Hey,

I wanted to add a "headless Dropdown" and found a few alternatives:

1. https://www.radix-ui.com/
2. https://headlessui.dev/
3. https://reach.tech/

First I integrated radix-ui but later discovered that it's bigger in payload than the others:

package	size GZipped	size minified
radix-ui	~15KB	~46KB
headless-ui	~5KB	~16KB
reach-ui	~8KB	~25KB

For me this is an important difference so I switched packages. However I wanted to ping you here and ask you if you knew about this? Can it be optimized, or is it because of more features out-of-the-box?

[benoitgrelard]

Hi @iampava,

Thanks for opening this up.

or is it because of more features out-of-the-box?

You guessed it correctly, that is the reason why it's bigger than these other libraries.
Radix's DropdownMenu offers many more features.

For example, headless-ui lacks:

• any sort of built-in positioning
• any collision detection

Both headless-ui and reach-ui lack:

• submenu support
• checkbox items support
• radio items support
• etc

Here's a basic list of features we support out-of-the-box:

Important to note also, the size reported on our website are coming from the BundlePhobia API (when it works! 😅) so:

• it might not be super accurate compared to when bundling a real app
• it doesn't take into account any potential tree-shaking savings if you don't use all the parts.
  • For example if you bring it in "somewhat" parity with the other mentioned libs, and don't use all the "optional" parts (Group, Label, CheckboxItem, ItemIndicator, RadioGroup, RadioItem, Separator, Arrow), in theory they would get three-shaken and you'd lose all that weight.
  • I say "in theory" because tree-shaking can be a bit tricky to get right, in fact I was trying to test this out for you and it looks like we broke tree-shaking in our upcoming release so I'll have to check it out.
  • that being said, in theory we've even improved that in the latest release by separating submenu parts into their own parts now, meaning that if you don't need submenu support, you also wouldn't incur some of the weight

Can it be optimized

I am sure if we focus even more attention to tree-shaking optimisation, there might be other potential weight savings. That being said, BundlePhobia will always report the full size of everything exported in the package, whether you will use it or not.

Hopefully that helps understand the difference in size!

✌️

[iampava]

Got it, thanks :D

For me right now the most important part is the bundle size, so I have moved to @headlessui/react for now. Good luck!