ant-design / ant-design/pro-components
🐛[BUG]: ⚠️打包体积 / Tree Shaking 有问题 (有点离谱)
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
前置条件:
- [x] 我只使用了 `@ant-design/pro-components` 中的 `LoginForm`, `ProFormText`, `ProFormCheckbox`, 没用使用其他任何 pro 组件
- [x] `Vite` 的 SPA 项目, 没有做过额外打包配置
- [x] 使用 `rollup-plugin-visualizer` 来进行打包结果分析
### 📷 复现步骤
1. 使用 LoginForm, 然后打包, 然后查看结果
2. 切换为普通 Form, 然后打包, 然后查看结果
3. ❌ 使用 ProForm之后打包结果很离谱, 里面绝大多数都是从来没有用到过的也被一起打包了
- 使用普通Form, 只用到这些 (✅结果非常的OK)
```ts
import { Alert, Checkbox, Form, Input, theme, Typography } from 'antd';
```


- 使用 `LoginForm`, 只用到如下这些 (❌结果很离谱, 完全失控)
```ts
import { LoginForm, ProForm, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
import { Alert, theme, Typography } from 'antd';
```


### 🏞 期望结果
应该只打包用到的部分.
### 💻 复现代码
上述很明确了, 贴代码不太方便, 应该也不需要
### © 版本信息
- ProComponents 版本: latest
- umi 版本: N/A
- 浏览器环境: Chrome 120
- 开发环境: Windows 11
### 🚑 其他信息
我不觉得是需要手动分包的问题
1. 我只在一个模块 (组件) 里使用了 `ProForm`, 结果就已经这么离谱了
2. 像图中这些 `select` / `cascader` / `picker` / `slider` 都是不可能有用到的, 但是被打包进去了, Tree Shaking有问题
3. Tree Shaking正常的话, 打包结果应该和使用 `antd` 的 `Form` 差不多才对
4. 综上, 我觉得是 `pro-components` 在这方面有问题
Contributor guide
Research direction
Reproduce the Vite SPA build with LoginForm, ProForm, ProFormCheckbox, and ProFormText, then compare it with the plain antd Form imports using rollup-plugin-visualizer. Inspect the generated bundle to determine why unused select, cascader, picker, and slider code remains. Done means the ProComponents build contains only the used functionality or the cause is documented with a focused reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, rollup, typescript, vite
- Domain
- build-system, frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100