距离 v5 发布已经过去快五年了。五年间，前端世界发生了翻天覆地的变化——React 18/19 带来了并发渲染，antd 从 v4 升级到了 v6，构建工具从 webpack 演进到了 Turbopack，CSS-in-JS 和 Tailwind 成为主流。v6 主要做了两件事：全面拥抱最新技术栈，以及清理历史包袱。
🌟 v6 背后的蚂蚁生态
- Ant Design V6[1] — 企业级设计系统。Pro v6 全面采用 antd 6，启用 CSS 变量模式（cssVar），支持 Default、Dark、Glass 等多种风格预设，渲染性能显著提升。
- Ant Design X[2] — AI 界面解决方案，基于 RICH 设计范式将 GUI 与自然语言交互有机融合。Pro v6 内置的 AI 助手页面基于 Ant Design X 构建，开箱即用。
- Ant Design CLI[3] — 官方命令行工具（
npx antd），查询组件 API、获取示例代码、诊断项目配置一步到位。Pro v6 已内置集成，告别频繁翻文档。
- utoo[4] — 基于 Turbopack 的 Rust 构建引擎，提供极速冷启动和毫秒级 HMR。Pro v6 默认使用 utoopack 构建，生产构建提速约 42%。
🚀 框架升级
React 19 + antd 6
v6 基于 React 19 和 antd 6 构建。React 19 的并发特性与 Server Components，antd 6 的设计系统更新与 CSS 变量主题——这些在 v5 中还无法触及的能力，现在开箱即用。
Umi Max 4
v5 已在使用 Umi Max，v6 升级到 @umijs/max 4，带来 utoopack 默认构建引擎和更完善的插件体系：
- import { useModel } from 'umi';
+ import { useModel, request, useAccess, getLocale, useIntl } from '@umijs/max';
ProComponents v3
分散的 @ant-design/pro-table、@ant-design/pro-form、@ant-design/pro-layout 等多个包统一为 @ant-design/pro-components v3。一个包解决所有中后台组件需求，版本对齐不再头疼。
💎 样式体系重构
v5 的样式基于 Less，这在早期是明智的选择，但 Less 的维护活跃度持续下降。v6 全面迁移到现代 CSS 方案：
- Tailwind CSS v4：原子化 CSS，布局和间距不再需要写自定义样式
- antd-style v4：消费 antd Design Token 的 CSS-in-JS 方案，主题切换零成本
- CSS Modules：组件级样式隔离，避免命名冲突
同时启用 antd CSS 变量模式（cssVar），不仅支持动态主题切换，渲染性能也有提升。
⚡ 构建提速
v5 使用 mfsu（基于 webpack 5）做依赖预编译，v6 切换到 utoopack[5]（Turbopack + Rust 核心），构建速度显著提升：
| 版本 |
构建工具 |
生产构建耗时 |
| v5.2.0 |
webpack 5 (mfsu) |
~15.5s |
| v6.0.0 |
utoopack (Turbopack) |
~9.0s |
测试环境：Apple M-series, Node 22
生产构建提速约 42%，日常开发中冷启动和 HMR 提升更为明显。同时启用了 routePrefetch 路由预加载，页面切换更加流畅。
🤖 AI 能力
v6 新增了 AI 助手页面，基于 Ant Design X 构建。这是一个开箱即用的聊天界面示例，展示了如何在 Pro 项目中集成 AI 对话能力。
🔧 工具链现代化
- Biome 替代 ESLint + Prettier — 一个工具搞定 lint + format，速度快 10 倍以上，告别多个配置文件的繁琐
- React Query 替代 useRequest — 缓存管理、请求去重、乐观更新、无限滚动，中后台最常见的需求都有了现成方案
- yorkie → husky · moment → dayjs · lodash → 原生 API / clsx · Class 组件 → 函数式组件
- Docker 配置移除 · pro-cli → git clone + npm run simple
🌐 Cloudflare Worker 后端
v6 的演示 API 迁移到 Cloudflare Workers[6]（Hono[7] 框架）。cloudflare-worker/ 目录独立于主项目，有自己的 package.json 和 tsconfig.json，可以独立部署。
📊 D3 地图可视化
D3 方案零配置，开箱即用。
📖 Cheatsheet 速查文档（取代 pro.ant.design）
v6 用项目内 Cheatsheet 文档全面取代了原有的 pro.ant.design[8] 文档站。文档以 Markdown 文件内嵌在仓库中（docs/cheatsheet.zh-CN.md / docs/cheatsheet.en-US.md），通过 @ant-design/x-markdown[9] 在 Welcome 页面直接渲染，支持语法高亮和暗色模式。
覆盖内容：v6 新特性、快速开始、路由与菜单、布局、数据流、请求、权限、国际化、样式、测试与调试、FAQ——原来散布在 pro.ant.design 上的核心文档现在全部内置于项目中，开箱即查，无需跳转外部站点。
🔄 升级指南
v6 是一次大版本升级，涉及框架和依赖的全面更新，推荐新建 v6 项目，逐步迁移业务代码：
- 依赖替换：
umi → @umijs/max，分散的 ProComponents → @ant-design/pro-components
- 样式迁移：Less → Tailwind + antd-style + CSS Modules
- 导入路径：
from 'umi' → from '@umijs/max'
- 请求方式：
useRequest → @tanstack/react-query
- 代码检查：ESLint + Prettier → Biome
- 日期库：moment → dayjs
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git myapp
cd myapp
npm install
npm run simple # 精简为最小模板
🙏 致谢
感谢所有为此版本做出贡献的开发者！v6 的开发跨越了将近五年，凝聚了 100 余位贡献者的智慧。特别感谢 @chenshuai2144 在 v6-beta 早期的奠基性工作，以及所有提交 PR、反馈问题、参与讨论的社区伙伴。
完整更新日志请访问：https://github.com/ant-design/ant-design-pro/issues/11734
参考资料
发表于 2 小时前
|
查看: 3|
回复: 0
