按需加载css的核心是让样式随组件代码一同分割并加载。应避免cdn全量引入导致全局污染，改用构建工具按需解析；若必须用cdn，仅引入对应组件独立css文件；vite需显式import样式且配置插件include与deep；webpack需关闭mini-css-extract-plugin的allchunks；tailwind与组件库共存时应优先使用组件prop而非工具类，并用@layer控制层级。
CDN引入时如何避免全局污染
直接在 里用 <link> 加载完整 CSS 组件库（比如 element-plus.css 或 ant-design.css），样式会无差别注入全部类名，哪怕你只用了 Button，DatePicker 的样式也进了首屏资源。更麻烦的是，这些样式往往带全局重置（如 body 字体、h1 margin），和项目原有 CSS 冲突。
实操建议：
- 不走 CDN 全量引入，改用构建工具按需解析 —— 这才是“按需加载”的实际落地点
- 如果必须用 CDN（如静态页快速验证），只引入组件对应独立 CSS 文件，例如用
el-button就只加https://unpkg.com/element-plus@2.7.0/dist/components/button/style/css.js（注意后缀是.css.js，这是 Element Plus 的样式入口模块） - 警惕 CDN 上的
index.css或reset.css类似文件，它们大概率含全局规则
Vite + unplugin-vue-components 怎么配才真按需
很多人装了插件但首屏 CSS 没变小，问题出在没关掉自动导入的样式联动。这个插件默认只处理组件注册，不负责样式注入 —— 样式得靠 unplugin-auto-import 或手动 import 触发。
实操建议：
- 确认
unplugin-vue-components配置中启用了dirs和dts，且组件路径没写错（比如components/ui/而不是src/components/ui/） - 样式加载必须显式开启：在插件配置里加
include: [/\.vue$/, /\.ts$/]并设置deep: true，否则script setup里的import不会被扫描 - 真正关键一步：每个用到的组件，必须在组件内部或
main.ts中执行一次import 'element-plus/es/components/button/style/css'—— 构建时才能把该样式打到对应 chunk，而不是全塞进style.css
Webpack 项目里 import 'xxx/style/css' 为什么没生效
常见现象：写了 import 'ant-design-vue/es/button/style/css'，但构建后样式还是没进对应 JS chunk，反而跑到了主 CSS 文件里。根本原因是 Webpack 默认把所有 import 的 CSS 当作“入口依赖”，统一抽离到 main.css。
实操建议：
- 检查
mini-css-extract-plugin配置：必须关闭allChunks: true（V5+ 默认为false），否则它会强行把所有 CSS 合并 - 确保组件样式路径正确：
ant-design-vue是es/button/style/css，而arco-design是es/button/style/index.css，少个index就 404 - 如果用了 CSS Modules 或
postcss-import，它们可能拦截了import语句，导致样式未被识别为“动态依赖”
tailwindcss + 组件库共存时 class 冲突怎么破
像 el-button 自带 is-round 类，Tailwind 又定义了 rounded-full，两者都作用于 border-radius，但优先级取决于 CSS 加载顺序和 specificity，很容易一个盖掉另一个。
实操建议：
- 禁止在组件库组件上直接写 Tailwind class（如
<el-button class="rounded-full"></el-button>），改用组件库自己的 prop（如:round="true"） - 用
@layer components在 Tailwind 配置里包裹组件库定制样式，确保它们比基础层（base）后加载、比工具类（utilities）先加载 - 遇到必须覆盖的情况，加
!important是最省事的解法 —— 比起写一堆嵌套选择器，它反而更可控、更可维护
import 或配错一个 include，就退回全量加载。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
