全量加载 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 语句做映射。
- 必须确保
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 就不会打包它，页面就无样式。
立即学习“前端免费学习笔记（深入）”；
- 不能写成
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是全局重置，必须在最前加载；但它和按需加载不冲突，也不算“按需” - 主题变量（如
@primary-color）若通过modifyVars注入，必须在所有组件样式之前加载；否则button/style/css里的颜色还是默认值 - Vite 用户要注意：
ensureStyleFile插件选项只对style: true（Less）有效，对style: 'css'无效
真正的按需，是让 Webpack/Vite 的 chunk graph 里，每个组件样式只出现在它对应 JS chunk 的依赖中。路径写错、插件没生效、reset.css 沉余引入、主题变量加载时机不对——这四个点，任一出问题，体积就减不下去。
