Ant Design Pro v6.0.0 发布

作者支付宝体验科技

2026年5月6日 19:57

距离 v5 发布已经过去快五年了。五年间，前端世界发生了翻天覆地的变化——React 18/19 带来了并发渲染，antd 从 v4 升级到了 v6，构建工具从 webpack 演进到了 Turbopack，CSS-in-JS 和 Tailwind 成为主流。v6 做了两件事：全面拥抱最新技术栈，以及清理历史包袱。

🌟 v6 背后的蚂蚁生态

Ant Design V6 — 企业级设计系统。Pro v6 全面采用 antd 6，启用 CSS 变量模式（cssVar），支持 Default、Dark、Glass 等多种风格预设，渲染性能显著提升。
Ant Design X — AI 界面解决方案，基于 RICH 设计范式将 GUI 与自然语言交互有机融合。Pro v6 内置的 AI 助手页面基于 Ant Design X 构建，开箱即用。
Ant Design CLI — 官方命令行工具（npx antd），查询组件 API、获取示例代码、诊断项目配置一步到位。Pro v6 已内置集成，告别频繁翻文档。
utoo — 基于 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（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（Hono 框架）。cloudflare-worker/ 目录独立于主项目，有自己的 package.json 和 tsconfig.json，可以独立部署。

📊 D3 地图可视化

监控页地图从 @antv/L7 替换为 D3 hex-tile 方案。L7 需要独立的 Mapbox token 才能工作，对演示和本地开发都不友好。D3 方案零配置，开箱即用。

📖 Cheatsheet 速查文档（取代 pro.ant.design）

v6 用项目内 Cheatsheet 文档全面取代了原有的 pro.ant.design 文档站。文档以 Markdown 文件内嵌在仓库中（docs/cheatsheet.zh-CN.md / docs/cheatsheet.en-US.md），通过 @ant-design/x-markdown 在 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 github.com/ant-design/… myapp cd myapp npm install npm run simple # 精简为最小模板

🙏 致谢

感谢所有为此版本做出贡献的开发者！v6 的开发跨越了将近五年，凝聚了 100 余位贡献者的智慧。特别感谢 @chenshuai2144 在 v6-beta 早期的奠基性工作，以及所有提交 PR、反馈问题、参与讨论的社区伙伴。

完整更新日志请访问：github.com/ant-design/…

本文使用 mdnice 排版

普通视图