Is it normal or tree shaking is not working? Just a single Button component adds 126kb to my bundle.

[fsgreco]

I'm using AntD and dealing with huge bundle results. I know for a fact that Vite does tree shaking by default and antD should be compatible with it.

But if for example you create a vite app, install and and import only a Button component your bundle will be huge:

1. npm create vite@latest test -- --template react && cd test
2. npm install antd
3. Import Button inside ./src/app.jsx and use it somewhere.
4. Do npm run build and see the total amount of bundle.

In my case it is something like this:

> vite build

vite v5.0.12 building for production...
✓ 1308 modules transformed.
dist/index.html                  0.39 kB │ gzip:  0.27 kB
dist/assets/index-mnVFW9LP.js  267.99 kB │ gzip: 88.34 kB
✓ built in 3.73s

Considering that by default the Vite boilerplate will have 142kb, if we rest that to 268 we still have 126kb for a single button. Is this fine or maybe vite is not doing the tree shaking?

Thanks in advance for any help or insights!

[yoyo837]

Can you analyze your bundle with https://www.npmjs.com/package/rollup-plugin-visualizer?

[fsgreco]

Yes I just tried it, here is the file https://transfer.sh/YSHMBB0aYs/stats.html

[fsgreco]

@yoyo837 I created another one analisis, this time with gzipSize: true option:
https://transfer.sh/yjYeCAUgbK/stats.html

PS; my dependencies on production are only these:

  "dependencies": {
    "antd": "^5.13.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

[craigmiller160]

I'm another user of vite & antd and having the same results. Tons of antd code I'm not using is being pulled in. I would argue that something in the antd codebase is not designed properly for free shaking.