Bundle size

[prbxr]

I notice that by adding MenuItemCheckbox,MenuBar,MenuItem the gzipped bundle size increases by 17kb, of which popperjs/core is 7kb.
Why it is that large for 'just' a menu?
Why is popperjs used?
What can be done about this?
Thanks

[diegohaz]

Popper.js is used to correctly position the menu popover. I'm afraid there's only so much we can do about this. :/

[axelboc]

I'm giving Ariakit a go to replace an unmaintained menu library in a Vite/React/TypeScript project. Just adding the following import and rendering a menu with some items increases my app's minified bundle size by 128 kB (38 kB gzipped):

import { Menu, MenuButton, MenuItem, MenuProvider } from '@ariakit/react';

While I really love the result (great API, great accessibility, etc.), this does feel excessive. 😟

When I analyze the bundle with source-map-explorer, it does seem that tree-shaking works (at least partly), since I only see one named module called menu for @ariakit/react-core. The other modules that make up most of the added weight seem to be coming from an esm/_chunks folder:

For @ariakit/core, I see a menu/menu-store.js module, a bunch of modules from esm/_chunks as well, and two utility modules from esm/utils: focus and events:

The above doesn't quite add up to 128 kB for some reason (maybe it's the entrypoint package, @ariakit/react) but it's still around 100 kB.

Interestingly, during the build, Vite logs a whole bunch of errors, all the same, for each JS file of @ariakit/* in node_modules: "Error when using sourcemap for reporting an error: Can't resolve original location of error." Since it relates to sourcemaps, I doubt it's linked to the bundle size issue, but who knows...