仅引入AntD Button组件却生成大体积包？Vite摇树优化是否正常？

首先，单个AntD Button组件引入后增加约126kb未压缩体积是正常现象，并非Vite的Tree Shaking未生效。原因在于AntD的组件并非完全独立，Button依赖了大量框架基础模块：

• AntD全局配置上下文（如ConfigProvider的主题、国际化逻辑）
• 样式系统核心（包括CSS-in-JS引擎、主题变量、通用样式规则）
• 通用工具函数、无障碍访问相关逻辑
• 组件基础交互封装（如点击反馈、状态管理）

这些依赖是AntD组件正常工作的必要部分，Tree Shaking已经剔除了未使用的其他组件（如Modal、Input等），但无法移除这些共享基础模块。

验证Tree Shaking是否生效的方法 #

可以通过以下方式确认摇树优化正常运行：

1. 执行vite build --analyze生成打包体积分析报告，查看是否只有Button相关模块被引入，没有其他无关组件的代码
2. 直接查看打包后的dist/assets/index-*.js文件，搜索其他组件名称（如Modal），如果没有匹配结果，说明摇树已经生效

进一步优化体积的方案 #

如果对体积有更高要求，可以尝试以下优化：

• 使用AntD官方推荐的按需引入插件：配置unplugin-auto-import和unplugin-react-components，自动按需引入组件和样式，减少不必要的基础模块打包
• 启用Vite的build.minify为terser并开启更严格的压缩配置，进一步缩小未压缩体积
• 生产环境依赖服务端gzip或brotli压缩，实际传输体积会远小于未压缩值（你的测试中gzip后仅增加了约40kb，属于合理范围）

内容的提问来源于stack exchange，提问作者Santiago