Ant Design v5 CSS-in-JS Bundle Size and Tree-Shaking Optimization

Runtime Style Injection Overhead

Ant Design v5 transitioned from Less to a CSS-in-JS architecture via @ant-design/cssinjs. While this enables dynamic theming through Design Tokens, it introduces a runtime style injection layer that increases the baseline JavaScript bundle size compared to the static CSS approach used in v4.

Tree-Shaking and Import Patterns

For low-traffic applications where initial payload size is critical, maximizing tree-shaking is essential. The current implementation relies on ES module imports (e.g., import { Button } from 'antd') and the sideEffects: false flag in the package configuration to ensure unused components are excluded from the final production build.

Configuration Uncertainty

There is uncertainty regarding the most efficient way to minimize the DOM overhead caused by the token system. When using ConfigProvider with custom tokens or the dark algorithm, the library generates CSS variables per component instance, which can increase the number of style tags in the document head.

• Does a specific configuration exist to opt out of per-instance style injection in favor of a global static stylesheet?
• What is the measurable impact on the gzipped bundle size when transitioning from v4 static CSS to v5 runtime CSS-in-JS for a minimal component set?