Tree shaking not working

[dsluijk]

🐛 bug report

Three shaking does not seem to be working. After adding Chakra UI to my bundle the size increased from 8 kb to 262 kb. Looking at the reporter it does not seem like the tree shaker is working. Talking to other people using different bundlers, the bundle should be at least 60% smaller.

🎛 Configuration (.babelrc, package.json, cli command)

See the code sample.

🤔 Expected Behavior

I expect the bundle to be much smaller.

😯 Current Behavior

No errors, just a large bundle. It currently looks like:

✨ Built in 10.96s

dist/index.html               347 B    5.61s
dist/index.441a14e5.js    262.77 KB    5.70s

And without Chakra:

✨ Built in 1.91s

dist/index.html             347 B    742ms
dist/index.689fb784.js    8.78 KB    447ms

Even with CRA (using the larger React instead of Preact), it's more than half the size:

File sizes after gzip:

  90.64 KB  build/static/js/2.3df7e3be.chunk.js
  1.39 KB   build/static/js/3.afde2336.chunk.js
  1.17 KB   build/static/js/runtime-main.51fc09c3.js
  1.14 KB   build/static/js/main.ad6f0748.chunk.js

💁 Possible Solution

Not sure.

🔦 Context

I'm just trying to use Chakra without increasing the bundle that much.

💻 Code Sample

Minimalistic repository can be found here. After installing the dependencies you can run yarn analyse to generate the report.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.3.1
Node	16.4.0
Yarn	1.22.10
Operating System	Arch Linux x86_64 5.12.13-arch1-2

[dsluijk]

I also tried it with React, as the aliasing might give issues. This gives the same behavior, with an even larger bundle size.

✨ Built in 7.16s

dist/index.html               347 B    384ms
dist/index.cb7e4994.js    373.46 KB    3.75s

You can view this version on the react branch here.

[dsluijk]

This seems to be related to #4565.

[devongovett]

First problem: it builds but doesn't run. There's an undefined object error at runtime. This is related to #6361 and chakra-ui/chakra-ui#4289 but we should do a better job surfacing the error at build time potentially, or fix symbol propagation so it ignores empty exports. cc. @mischnic

After commenting out export * from "./types"; in node_modules/@chakra-ui/utils/dist/esm/index.js, it at least builds and runs without error.

As for the actual bundle size, a few problems:

1. You're comparing the ungzipped size from Parcel with the gzipped size from create-react-app. On the latest nightly, the build is 235 KB ungzipped for me, or 77 KB after gzip. That's smaller than your create-react-app size.
2. @chakra-ui/styled-system and @chakra-ui/control-box are missing "sideEffects": false in their package.json. Adding this reduces the bundle size by 10 KB (before gzip).
3. @chakra-ui/theme is not tree-shakeable so you get the theme for all components not just the ones you use. For example, see https://unpkg.com/browse/@chakra-ui/theme@1.9.1/dist/esm/components/index.js which exports an object containing every component. This represents over 50 KB on its own.
4. Importing useToast results in a transitive dependency on framer-motion, which adds 80 KB to the bundle size. Mostly it's this file and its dependencies: https://unpkg.com/browse/framer-motion@4.1.17/dist/es/render/dom/motion.js. Most of this you likely don't need, but unfortunately, it cannot be tree shaken. Commenting out the featureBundle assignment reduces the bundle size significantly. Using this library to build a basic toast animation seems like overkill to me.

You should bring these issues with the Chakra UI team / the framer motion team. Perhaps they can improve the design of their libraries to be more tree-shakeable. I don't think there's anything Parcel can really do here. Our bundle size output seems to be mostly in line with webpack or even smaller.

[dsluijk]

Weird, it compiles fine for me. The gzipped vs non-gzipped difference is a mistake on my end, with that in mind the size seems within expectation for the library. I'll close it for now, as this is an non-issue for Parcel then.