Ant Design Pro v6 发布：全面升级技术栈，带来更现代开发体验！

Ant Design Pro v6 正式发布在距离 v5 发布近五年后Ant Design Pro v6 现已正式发布。五年间前端世界发生了翻天覆地的变化React 18/19 带来了并发渲染antd 从 v4 升级到了 v6构建工具从 webpack 演进到了 TurbopackCSS-in-JS 和 Tailwind 成为主流。Ant Design Pro 也在持续演进而 v6 带来的不是更多功能而是更现代、更精简、更贴近当下开发体验。v6 做了两件事全面拥抱最新技术栈以及清理历史包袱。具体更新内容框架全面升级v6 基于 React 19 和 antd 6 构建。React 19 带来的并发特性、Server Components 能力antd 6 带来的设计系统更新、CSS 变量主题这些在 v5 中只能梦想的东西现在开箱即用。从 umi 3 升级到 umijs/max 4Umi MaxUmi Max 将常用插件打包为一站式方案权限、国际化、数据流、请求全部从 umijs/max 统一导入无需单独配置。Umi Max 4 默认使用 utoopack 构建基于 Turbopack开发体验显著提升。从分散的 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 v4CSS-in-JS 方案直接消费 antd 设计令牌主题切换零成本CSS Modules组件级样式隔离避免命名冲突。所有页面已移除 Less 文件迁移到 Tailwind antd-style CSS Modules 三位一体的样式方案同时启用了 antd CSS 变量模式cssVar支持动态主题切换。构建提速v5 使用 mfsu基于 webpack 5 Module Federation做依赖预编译虽有效但有局限性。v6 切换到 utoopack基于 Turbopack冷启动和热更新速度有了质的飞跃。同时启用了 routePrefetch 路由预加载页面切换更加流畅。AI 能力v6 新增了 AI 助手页面基于 Ant Design X 构建这是一个开箱即用的聊天界面示例展示了如何在 Pro 项目中集成 AI 对话能力。工具链现代化v6 用 Biome 统一了代码检查和格式化一个工具搞定 lint format速度快 10 倍以上配置也更简洁。数据请求层从 umi 内置的 useRequest 迁移到 tanstack/react-query更强大的缓存管理、请求去重、乐观更新、无限滚动中后台最常见的需求都有了现成方案。其他工具链更新包括yorkie 换成 husky更稳定的 Git hooksmoment 换成 dayjs体积更小的日期库lodash 换成原生 API / clsx减少依赖体积Class 组件换成函数式组件全面拥抱 HooksDocker 配置移除精简项目结构pro-cli 换成直接 git clone npm run simple更透明的初始化方式。Cloudflare Worker 后端v6 的演示 API 迁移到了 Cloudflare Worker基于 Hono 框架这是一个独立的 cloudflare-worker/ 目录有自己的 package.json 和 tsconfig.json不与主项目耦合可以独立部署。D3 地图可视化监控页的地图从 antv/L7 替换为 D3 hex-tile 可视化方案。L7 需要独立的 Mapbox token 才能工作对演示和本地开发都不友好D3 方案零配置开箱即用。Cheatsheet 速查文档新增了 Cheatsheet 速查文档基于 ant-design/x-markdown 渲染支持语法高亮和暗色模式。开发者可以在 Welcome 页面直接查看路由、布局、请求、权限等常用配置无需跳转外部文档。升级指南v6 是一次大版本升级涉及框架和依赖的全面更新。如果正在使用 v5推荐新建 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。由于升级跨度较大官方提供了 npm run simple 命令来快速生成最小化模板从这个干净的起点开始会比逐一迁移更高效。完整更新日志核心框架升级升级到 React 19、antd 6、Umi Max 4 / umijs/maxProComponents 统一为 ant-design/pro-components v3ant-design/icons 升级到 v6moment 换成 dayjslodash 换成原生 API / clsxrc-util 换成 rc-component/util。样式体系Less 全部移除迁移到 Tailwind CSS antd-style CSS ModulesTailwind CSS v3 升级到 Tailwind CSS v4启用 antd CSS 变量模式 (cssVar)AlibabaSans 作为默认字体全局表单 variant 设为 filled 样式。构建与工具链mfsu 换成 utoopack (基于 Turbopack)ESLint Prettier 换成 Biomeyorkie 换成 huskyumi-presets-pro 直接使用插件TypeScript 升级到 6.xDocker 配置移除pro-cli 移除使用 git clone npm run simple。新增功能新增 AI 助手页面、React Query 数据请求、Cloudflare Worker API、D3 hex-tile 地图、路由预加载、骨架屏 Loading 组件、Cheatsheet 速查文档、版本号和 commit hash 显示在页脚、历史版本链接、exportStatic 静态导出支持、错误页面卡片包裹。架构重构Class 组件换成函数式组件提取共享组件、共享 Mock 工具请求管线和 React Query 优化减小包体积替换重度依赖移除未使用页面和路由移除 Fragment 包装简化 Jest 配置。问题修复修复首次加载白屏、刷新时标题不显示、antd 时间选择器中文语言包缺失、Hash 路由在 getInitialState() 中被忽略、登录页 title{false} 不生效、SearchList 标签页路由异常、HeaderDropdown 响应式样式不生效、暗黑主题样式问题、CORS 不支持多级子域名、Tailwind CSS 因 Less import 顺序未生效、Monitor 页面地图显示、mock 路由重复注册警告、右侧内容区边距和边框问题、ModalForm 触发器类型定义、安全漏洞、headScripts 链接与 publicPath 不匹配、404 路由、404 页面横向滚动条、Select.Options - options、消息提示不自动关闭、RightContent navTheme 条件值、登录重定向原始 URL 保留等问题。国际化新增西班牙语文档、土耳其语翻译404 页面多语言支持修复 zh-TW 翻译错误、SettingDrawer 翻译错误。依赖更新umijs/max 升级到 4.6.45biomejs/biome 升级到 2.4.12express 升级到 5.2.1Jest 升级到 30.xcross-env 升级到 10.0.0gh-pages 升级到 6.1.1react-dev-inspector 升级到 2.0.1新增 highlight.js。Ant Design Pro v6 带来如此多的更新能否满足开发者的需求呢