Ant Design v6：zeroRuntime 使用与踩坑总结
💡
原文中文，约2500字，阅读约需6分钟。
📝
内容提要
在升级到 React 19 和 Ant Design v6 后，页面的 CLS 性能下降，导致样式闪烁。虽然通过 CSS 固定组件尺寸有所缓解，但效果不够理想。尝试使用 Ant Design 的 zeroRuntime 方案，虽然能避免运行时注入问题，但动态主题功能几乎失效，适合静态站点而不适合需要动态主题的项目。
🎯
关键要点
- 升级到 React 19 和 Ant Design v6 后，页面的 CLS 性能下降，样式闪烁。
- 通过 CSS 固定组件尺寸有所缓解，但效果不理想。
- 尝试使用 Ant Design 的 zeroRuntime 方案，避免运行时注入问题，但动态主题功能几乎失效。
- Ant Design v6 默认使用 CSS-in-JS，CSS 变量在运行时动态注入，导致静态站点首屏样式不完整。
- zeroRuntime 旨在构建阶段生成完整样式，避免运行时依赖。
- 使用 zeroRuntime 后，所有样式相关配置必须在构建期确定。
- cssVar 配置中的 key 必须一致，否则构建的 CSS 变量无法正确使用。
- 尝试生成浅色和深色两套 CSS 进行切换，复杂度高且不值得投入。
- zeroRuntime 不适合运行时多主题切换，目前仅保留单一深色主题。
- 在 zeroRuntime 模式下，Ant Design 的定制能力几乎不可用。
- 这是一次明确的取舍，灵活性与首屏性能和样式稳定性之间的权衡。
- zeroRuntime 适合静态站点和长期稳定的主题风格，但不适合需要动态主题的项目。
🏷️
标签
➡️
