如果把 Ant Design（antd）的样式一次性全量引入，首屏加载体积通常会明显增大，因此更推荐使用 babel-plugin-import 按需加载组件及其对应的 CSS。这里有几个关键细节一定不能忽略：样式路径必须写准确，例如 antd/es/button/style/css，否则不是出现 404，就是误触发 Less 加载；reset.css 需要单独保留，并且必须最先加载，不能纳入按需引入逻辑；主题变量也要在组件样式之前完成注入；另外，只有结合 sideEffects: false，未被使用的样式文件才有机会真正被 Tree Shaking 剔除。
直接引入 antd/dist/reset.css 或 antd/dist/antd.css 就属于全量加载。无论项目里实际只用了 Button、Table 还是 Tree，所有样式都会被打进主包，首屏性能和资源体积自然很难优化下来。
babel-plugin-import 能自动注入 CSS，但配置必须完全匹配
本质上，这个插件做的事情就是在编译阶段“改写 import”：把 import { Button } from 'antd' 转成 import Button from 'antd/es/button' + import 'antd/es/button/style/css'。它不会主动“判断”项目真实使用了哪些组件，而是严格根据 import 语句逐条完成映射，这也是 Ant Design CSS 按需加载能否生效的核心。
- 必须确保
libraryDirectory与实际模块目录一致：Ant Design v5 默认使用es（ESM），v4 可使用lib；一旦写错，就可能导致样式路径 404 style: 'css'表示加载已经编译好的 CSS；style: true表示加载 Less 源文件（需要额外配置 Less loader）- 如果已经使用了
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 或 Vite 都不会正确打包它，最终页面就会出现组件无样式的问题。
- 不能写成
import 'antd/es/button/style'—— 这会触发 Less 加载逻辑，如果没有配置 Less loader，就会直接报错 - 如果组件内部还依赖其他组件（例如
Modal会用到Portal），只引入 Modal 的样式可能并不完整，往往需要结合源码或构建产物进一步确认 - 配合
sideEffects: false的 package.json 配置，才能更大概率真正剔除未引用的 CSS 文件，进一步减少首屏包体积
不要让 reset.css 或全局变量破坏按需加载效果
很多开发者以为加了 reset.css 就算“样式清理完成”，其实它本身就有 10+KB，而且和组件级 CSS 没有直接替代关系——它属于基础层样式，必须单独保留，但绝不能用它替代组件样式文件。
antd/dist/reset.css属于全局重置样式，必须最先加载；它与 Ant Design 按需加载并不冲突，但本身也不属于“按需加载”- 主题变量（如
@primary-color）如果通过modifyVars注入，必须在所有组件样式之前完成；否则像button/style/css里的颜色仍然会使用默认值 - Vite 用户还需要注意：
ensureStyleFile这个插件选项只对style: true（Less）生效，对style: 'css'并不起作用
真正有效的按需加载，是让 Webpack 或 Vite 的 chunk graph 中，每个组件样式只出现在它对应的 JS chunk 依赖里。只要路径写错、插件未生效、reset.css 被重复或冗余引入、主题变量加载时机不正确，这四个关键点任意一个出问题，Ant Design CSS 首屏优化效果就很难真正落地。
