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 适合静态站点和长期稳定的主题风格，但不适合需要动态主题的项目。
❓
延伸问答
Ant Design v6 的 zeroRuntime 方案有什么主要优缺点？
zeroRuntime 方案可以解决 CLS 问题和样式闪烁，但动态主题能力几乎失效，适合静态站点和长期稳定的主题风格。
使用 zeroRuntime 后，样式配置有什么要求？
使用 zeroRuntime 后，所有样式相关配置必须在构建期确定，且 cssVar 配置中的 key 必须一致。
为什么在使用 Ant Design v6 时会出现样式闪烁？
样式闪烁是因为 Ant Design v6 默认使用 CSS-in-JS，CSS 变量在运行时动态注入，导致首屏样式不完整。
zeroRuntime 适合哪些类型的项目？
zeroRuntime 适合静态站点和主题风格长期稳定的项目，不适合需要动态主题的项目。
在使用 zeroRuntime 时，如何处理多主题切换？
zeroRuntime 不适合运行时多主题切换，复杂度高且不值得投入，目前仅保留单一深色主题。
Ant Design v6 的样式机制是怎样的？
Ant Design v6 默认使用 CSS-in-JS，CSS 变量由 JS 在运行时动态注入，而非静态 CSS 中提前定义。
🏷️
标签
➡️
