因为CSS无模块语义，构建工具无法静态分析类名使用情况；@import嵌套使样式全量打包，必须通过JS层按需导入（如import 'element-plus/theme-chalk/button.css'）并配合插件将样式纳入依赖图，才能触发Tree Shaking。
为什么 import 一个按钮却打包了整套 CSS
CSS 文件本身没有 export 和 import 语义，构建工具（如 Webpack、Vite）无法像处理 JS 那样静态分析选择器是否被使用。当你写 import 'antd/dist/antd.css'，整个文件就被当作“已引用”，所有规则——包括你从没用过的 .ant-tabs-ink-bar 或 .ant-carousel ——全进 bundle。
更关键的是：组件库的默认样式入口（比如 element-plus/theme-chalk/index.css）往往通过 @import 嵌套加载全部模块，而 @import 是 CSS 层的指令，不触发 JS 模块依赖链，Tree Shaking 完全看不见它。
- 构建器只认 JS 中的
import语句作为“使用信号” - 纯 CSS 里的类名、伪元素、媒体查询，统统无法被自动判定是否冗余
- 哪怕你只用了
<el-button>，el-table的样式仍会因入口文件里的一行@import "table.css"被打包进去
如何让 CSS 真正按需：JS 层触发 + 构建时注入
核心思路是把“样式加载”和“组件使用”绑定在同一个 JS 模块依赖图里，让构建器能追踪到“这个组件被用了 → 这个 CSS 应该保留”。
以 Element Plus 为例，正确做法不是引入全量 CSS，而是：
立即学习“前端免费学习笔记（深入）”；
- 按需引入组件：
import { ElButton } from 'element-plus' - 单独导入对应样式：
import 'element-plus/theme-chalk/button.css' - 配合插件自动完成第二步：Vite 用
vite-plugin-style-import，Webpack 用unplugin-vue-components+unplugin-import
插件会在编译时扫描 <template> 和 setup() 中出现的组件名（如 ElButton），动态插入对应的 import 语句——这样样式才真正进入模块图，Tree Shaking 才能起作用。
常见踩坑点：你以为按需了，其实没生效
很多项目配了插件但体积没变小，问题常出在这些细节上：
-
components: true自动注册时，dirs配置漏写了子目录，导致ElDialog的子组件ElOverlay未被识别，样式丢失或回退到全量 - 图标字体仍走
@import url("/iconfont.css")这种外部链接，绕过所有插件和打包流程，整套字体文件照打不误 - 全局重置样式（如
normalize.css）、暗黑模式切换逻辑、CSS 变量定义，都写在入口 CSS 里，且没 JS 绑定，构建器根本不敢删 - 用了
require('./style.css')或内联<style src="xxx">，Vite 3+ 的treeShaking: true对这类写法无效
验证是否真按需：别只看组件名，要查产物
最终体积是否下降，不能靠“我只写了 ElButton”来判断。得直接看打包输出：
- 用
rollup-plugin-visualizer或source-map-explorer打开dist/assets/*.css，搜索是否存在未使用的组件类名（如.ant-calendar） - 检查产物中是否还含
@import语句，尤其是指向icons/或locales/的路径 - 对比 dev 和 build 模式下的 network 面板：build 后的 CSS 文件大小应明显小于全量入口（例如
button.css≈ 2–5KB，而非antd.css的 600KB）
真正难的从来不是“怎么配”，而是确认哪些样式被 JS 动态添加了 class、哪些变量被运行时计算、哪些 @import 藏在第三方依赖里——这些都会让 Tree Shaking 失效，且难以察觉。
