Very large size bundle size (80KB+) with only Button element (react-aria-components)

[eashish93]

📝 Feedback

I'm just tried react-aria-components on a fresh next.js app and by just importing only the button component, bundle size increased by 80KB+. This is not the case with react-aria hooks version.

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
[Package name]	react-aria-components
Browser	Chrome 111
Operating System	Mac OS 12.6.3

[devongovett]

Appears to be something wrong with the tree shaking. In the build output some of the components get their forwardRef compiled like this:

const $778035c5624f61e7$export$2dc68d50d56fbbd = (0, $dGqE5$forwardRef)($778035c5624f61e7$var$Breadcrumbs);

This should have a PURE annotation so the minifier can remove it:

const $778035c5624f61e7$export$2dc68d50d56fbbd = /*#__PURE__*/ (0, $dGqE5$forwardRef)($778035c5624f61e7$var$Breadcrumbs);

Some of them have this and some don't. I tried manually adding them and it reduced the bundle size a lot.

[devongovett]

After fixing that, there is another bug in the SWC minifier used by Next.js, where PURE annotations on forwardRef calls with a sequence expression (e.g. (0, $dGqE5$forwardRef)) are not removed properly. Disabling the swcMinify option in next.config.js seems to fix that one. I filed an issue here: swc-project/swc#7241

[eashish93]

I tried with swcMinify disabled in fresh next.js app and without app folder. Getting almost same result.

[devongovett]

Yeah you'll need the other fix first - inserting the PURE annotations in the react-aria-components build. See #4357. That brings the size down a lot for me, and then disabling the swcMinify option fully optimizes it.

[eashish93]

This is barebone VITE build (esbuild version)

With react-only

With react + button

[devongovett]

I think #4357 should also fix that. esbuild seems to already support PURE annotations properly, so once they are there it should be fine.

[devongovett]

Just released v1.0.0-alpha.3 with this fix, and tested in a next.js project. It should be much improved. SWC also just improved the minifier, so in the next version of Next.js it should be even better.

[leerob]

Appreciate the deep diver here @devongovett!

[IonelLupu]

Still not fixed as described here: vercel/next.js#60206

[windmaomao]

the problem is not the next, if i use rollup, and import button only, it generates a 1.3M file.