如何按需加载Ant Design CSS减少首屏体积？

全量加载 antd 样式会增大首屏体积，需通过 babel-plugin-import 按需引入组件及对应 CSS；路径必须准确（如 antd/es/button/style/css），避免 404 或误触 Less 加载；reset.css 需单独保留且最先加载，不参与按需；主题变量须在组件样式前注入；sideEffects: false 配合才能真正剔除未用样式。

直接引入 antd/dist/reset.css 或 antd/dist/antd.css 就是全量加载，不管项目用没用 Button、Table 还是 Tree，所有样式都会打进主包——首屏体积根本减不下来。

babel-plugin-import 能自动注入 CSS，但必须配对正确

这个插件本质是在编译期把 import { Button } from 'antd' 翻译成 import Button from 'antd/es/button' + import 'antd/es/button/style/css'。它不“猜”你用什么组件，只按 import 语句做映射。

1. 必须确保 libraryDirectory 和实际模块路径一致：Ant Design v5 默认用 es（ESM），v4 可用 lib；写错会导致样式路径 404
2. style: 'css' 表示加载已编译的 CSS；style: true 表示加载 Less（需额外配 Less loader）
3. 如果用了 style: 'css' 却在项目里写了 import 'antd/dist/reset.css'，两者会叠加，反而增大体积

手动引入组件样式更可控，但容易漏

适合对构建链路不信任、或需要精细控制样式的场景。比如只用 Button 和 Input，就只引这两份样式：

import { Button, Input } from 'antd';import 'antd/es/button/style/css';import 'antd/es/input/style/css';

注意：style/css 是独立文件，不是 style/index.css；路径错一个字符，Webpack 就不会打包它，页面就无样式。

1. 不能写成 import 'antd/es/button/style' —— 这会触发 Less 加载逻辑，没配 Less loader 就报错
2. 如果组件内部依赖其他组件（比如 Modal 用到 Portal），只引 Modal 样式可能不够，得看源码或构建产物反推
3. 搭配 sideEffects: false 的 package.json 才能真正剔除未引用的 CSS 文件

别让 reset.css 或全局变量破坏按需效果

很多人以为加了 reset.css 就“重置干净了”，其实它本身就有 10+KB，且和组件级 CSS 无关联——它属于基础层，必须单独保留，但不能靠它替代组件样式。

1. antd/dist/reset.css 是全局重置，必须在最前加载；但它和按需加载不冲突，也不算“按需”
2. 主题变量（如 @primary-color）若通过 modifyVars 注入，必须在所有组件样式之前加载；否则 button/style/css 里的颜色还是默认值
3. Vite 用户要注意：ensureStyleFile 插件选项只对 style: true（Less）有效，对 style: 'css' 无效

真正的按需，是让 Webpack/Vite 的 chunk graph 里，每个组件样式只出现在它对应 JS chunk 的依赖中。路径写错、插件没生效、reset.css 沉余引入、主题变量加载时机不对——这四个点，任一出问题，体积就减不下去。