Ant Design v6：zeroRuntime 使用与踩坑总结
内容提要
在升级到 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 适合静态站点和长期稳定的主题风格，但不适合需要动态主题的项目。
延伸解读
zeroRuntime 的适用场景
zeroRuntime 方案适合静态站点和主题风格长期稳定的项目。它通过在构建期生成完整样式，显著提升首屏性能，减少样式闪烁问题。然而，对于需要动态主题切换的项目，zeroRuntime 的限制使其不再适用，开发者需谨慎选择。
动态主题的挑战
在使用 zeroRuntime 时，动态主题的实现变得复杂且不易维护。尝试生成多套 CSS 以支持主题切换会导致样式覆盖和可预测性下降。因此，开发者在设计时需考虑项目的主题需求，以避免后期的工程复杂度增加。
构建期配置的重要性
使用 zeroRuntime 时，所有样式相关配置必须在构建期确定。这意味着开发者需要在项目初期就明确主题和样式设置，以确保生成的 CSS 变量能够正确应用。忽视这一点可能导致样式闪烁和不一致的问题。
延伸问答
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 中提前定义。
