应按需加载组件库样式以优化首屏性能。推荐使用 unplugin-vue-components + unplugin-auto-import 自动导入所需组件及样式；手动导入需与 JS 一致；禁用全局 CSS 引入；利用 Vite 手动分块、预加载及懒加载；剔除冗余样式来源。
直接引入完整 CSS 组件库（如 Element Plus、Ant Design、Vant）会导致首屏加载大量未使用的样式，拖慢渲染速度、增加带宽消耗。解决核心是「按需加载样式」，而非简单拆分文件后全量 link。
只导入当前页面用到的组件样式
多数现代组件库支持按需导入 CSS。不推荐 import 'xxx/dist/index.css' 全量引入，而应与 JS 按需导入保持一致：
- 使用 unplugin-vue-components + unplugin-auto-import（推荐）：自动解析模板中使用的组件，并仅注册对应组件及其样式（需配置
dirs和resolvers，启用includeStyle） - 手动导入：比如只用了
ElButton和ElInput，就写：import 'element-plus/es/components/button/style/css';<br>import 'element-plus/es/components/input/style/css';
- Vite 项目可配合 unplugin-element-plus，自动提取并注入所需样式，无需手动 import
避免在入口或全局 CSS 中 import 组件库样式
很多人习惯在 main.ts 或 style/app.css 里一次性引入所有样式，这会让构建工具无法 shake 掉未使用部分：
- 删除
import 'element-plus/dist/index.css'这类全局引入 - 禁止在
:global{}或@import中加载组件库 CSS 文件 - 若需全局基础重置（如字体、边距），单独提取精简版 reset.css，不混入组件样式
利用构建工具做 CSS 代码分割与预加载
即使按需导入，多个页面共用的组件样式仍可能重复打包。借助构建配置进一步优化：
立即学习“前端免费学习笔记（深入）”；
- Vite 中启用
build.rollupOptions.output.manualChunks，把高频组件样式（如 button、icon）抽成独立 chunk - 配合
<link rel="preload" as="style">提前加载关键样式（适用于 SSR 或静态路由已知场景） - 对非首屏组件（如弹窗、表格），用
defineAsyncComponent+ 动态 import 样式，实现 JS 和 CSS 同步懒加载
检查并剔除冗余样式来源
有时“样式太大”并非来自组件库本身，而是叠加了其他因素：
- 确认未开启
css.preprocessorOptions中的全局变量注入（如@import 'vars.scss'被塞进每个组件样式） - 禁用主题包全量引入（如
import 'element-plus/theme-chalk/src/index.scss'），改用编译后 CSS 或 CSS 变量方案 - 检查是否误将组件库源码（
src/）直接 import —— 应始终引用es/或lib/下的构建产物
