按需引入 css 可显著提升性能：仅加载实际用到的样式，加快 cssom 构建、支持代码分割与缓存优化、避免全局污染、实现组件级主题控制，并大幅减小体积（如 el-button 仅约1.2kb），实测 fcp 缩短300–600ms。
全量引入 CSS 会强制浏览器解析所有规则，哪怕页面一个 class 都没用
浏览器加载 element-plus/dist/index.css 这类全量文件时，不管 DOM 里有没有 el-button 或 el-table，都会完整解析、计算并存储全部选择器（含伪类、媒体查询、嵌套展开后的组合器）。这直接拖慢 CSSOM 构建速度，尤其在低端设备上，解析 200KB 的 CSS 可能比解析 JS 更耗时。而按需引入只提供当前组件实际用到的那几十行样式，CSSOM 构建几乎无感知。
按需引入让构建工具能做真正的代码分割和 chunk 复用
全量 CSS 被打包进一个 style.css，所有页面共用，无法利用 HTTP 缓存粒度；按需引入后，样式随组件 JS 同步打进对应 chunk，例如 login.chunk.js 自动带 login.chunk.css，dashboard.chunk.js 带它自己的样式块。Vite 或 Webpack 能据此做：
- 对高频组件（如
button、icon）抽成独立shared.css - 用
<link rel="preload" as="style">提前加载首屏关键样式 - 非首屏组件（如
el-dialog）配合defineAsyncComponent实现 JS + CSS 同步懒加载
全量 CSS 带来隐式全局污染，按需则天然隔离
全量引入往往包含重置样式（body { margin: 0; font-family: ... }）、通用工具类（.m-2、.d-flex）甚至暗色模式开关，这些会覆盖项目原有基础样式，导致调试困难、FOUC 加剧。按需引入只加载组件自身结构样式（比如 .el-button 及其状态类），不碰全局环境，也避免因误用工具类引发的样式冲突。更关键的是：
- 禁用
@import 'element-plus/dist/index.css'后，build.rollupOptions.output.manualChunks才真正生效 - 不再有“改一个按钮颜色，整个表单布局错位”的连锁反应
- 主题切换可精确控制到组件级，而非整页刷洗
按需引入的样式体积压缩率远超 JS
JS 按需后可能剩 30–50KB，但 CSS 按需后常压到 2–8KB：一个 el-button 样式模块仅约 1.2KB，el-input 约 2.4KB；而全量 element-plus CSS 接近 180KB。这不是简单相减——未使用的 CSS 不仅不下载，还不参与渲染流水线中的样式计算、布局、绘制三阶段。实测中，FCP 缩短 300–600ms，LCP 提前 400ms 以上，尤其在 3G 网络下差异更显著。容易被忽略的一点是：unplugin-vue-components 必须配 includeStyle: true，否则它只注册组件，不触发样式 import，等于白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
