Search code examples
reactjsviteantdtree-shaking

AntD and Vite: is it normal that only a single Button component generates a big bundle?

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!

Solution

  • Well after a test, the Button from antd actually adds up 126kb to the build. You can test it by importing more than one component or by importing directly from files. Exemple :

    import { Button } from 'antd' -> 269.45kb

    import Button from '../node_modules/antd/es/button/button' -> 269.45kb

    If you add for example the BreadCrumbs the bundle will grow again. Vite is doing well the tree shaking, it's just the component of antd which are massive.