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

Answer

No fully static stylesheet mode is documented for Ant Design v5 that preserves dynamic design tokens. The ConfigProvider option cssinjs: { inject: false } can suppress per-instance <style> tags and emit a single global stylesheet, but the CSS-in-JS runtime remains in the JavaScript bundle. Tree-shaking still works with import { Button } from 'antd' when your bundler honors sideEffects: false; unused components should be excluded. The commonly cited gzipped increase for a minimal component set versus Ant Design v4 static CSS is roughly 30-45 KB, but that estimate is build-tool dependent and requires verification in your project.

Likely Explanation vs. Confirmed Facts

Likely explanation (unverified)

The inject: false option moves style output into a single global stylesheet, reducing DOM style-tag count, but it does not remove the CSS-in-JS runtime from the JavaScript bundle.

Confirmed behavior

ES-module imports such as import { Button } from 'antd' support tree-shaking when sideEffects: false is honored by the bundler. Unused components should be excluded from production output.

Steps for This Case

1. Confirm the installed Ant Design version is v5 and that sideEffects: false is present in node_modules/antd/package.json.
2. Wrap the application in ConfigProvider and set cssinjs={{ inject: false }} if you want a single global stylesheet instead of per-instance style tags.
3. Run a production build with your bundler (for example, Vite or webpack) and inspect the output HTML for <style> tags in the head.
4. Measure the gzipped JavaScript bundle and extracted CSS size with gzip -l or your bundler's analyzer, then compare against a baseline build using Ant Design v4 static CSS.

// React example
import { ConfigProvider } from 'antd';

<ConfigProvider cssinjs={{ inject: false }}>
  <App />
</ConfigProvider>

Missing Diagnostic Detail

Which bundler and version are you using (webpack, Vite, Next.js, etc.)? The bundle-size delta and the effectiveness of inject: false depend on how your bundler handles CSS extraction and tree-shaking, so this detail changes the verification steps.

Assumptions and Uncertainty

• Ant Design v5.0.0+ is assumed for the inject: false option; earlier v5 releases may not support it.
• The 30-45 KB figure is an approximate model-based estimate, not a measured result from your repository.
• Dynamic token overrides still generate CSS variables; with inject: false they are appended to the global stylesheet rather than creating separate tags.
• If you need runtime theme switching, a global stylesheet must be regenerated on token changes, which can increase build time.

Verification

1. Install Ant Design v5 in a minimal React project and import only Button and Input.
2. Build twice: once with default injection and once with cssinjs: { inject: false }.
3. Compare the number of <style> tags and the gzipped size of the JavaScript and CSS assets.
4. Repeat the comparison with Ant Design v4 static CSS to establish the v4-to-v5 delta.