引入antd

接下来在页面中实现我们想要的功能，引入antd并且在页面中添加一个Button组件，在点击Button组件时弹出对话框（antd的Modal组件），简单地修改index.jsx文件。

同样，在npx vite build后面使用cd dist && npx static-server -z托管dist目录可以获得最好的性能，打开DevTools，并勾选网速模拟和禁用缓存，如图1-12所示。

图1-12　Hello World antd

可以看到，在这种情况下引入antd，JavaScript文件和CSS文件的体积分别从133KB和947B增加到293KB和554KB。

CSS文件的体积增加得更明显，这是因为Vite通过Tree Shaking的特性只引入了Button组件和Modal组件所需要的JavaScript代码，而CSS则是全量引入的，包括所有其他没有用到的组件。

关于Tree Shaking的介绍请参考17.2节。