unocss的content配置必须覆盖所有含class字符串的文件路径和后缀，否则未覆盖部分的class将无法被扫描生成，导致运行时样式缺失；动态拼接类名需通过safelist显式声明或改用shortcuts/attributify方案。
content 配置没覆盖全，UnoCSS 就“看不见” class
UnoCSS 不会执行 JS 或 Vue 模板逻辑，它只做静态字符串提取。如果 content 里漏了某个文件类型或路径，对应 class 就不会被扫描到，结果不是“生成多余 CSS”，而是“该有的规则压根没生成”，导致运行时样式缺失——你可能误以为是体积优化成功了，其实是漏提了。
常见遗漏点：
-
content.files没包含.html文件（尤其用vite-plugin-html注入的模板） - JSX/TSX 中的
className字符串没被纳入，比如className="m-2 text-red-500"出现在.tsx里，但配置只写了.ts - Vue SFC 的
<style scoped></style>里写了原子类（不推荐），但 extractor 默认不处理 style 块
验证方式：运行 unocss --inspect，打开 http://localhost:5000 查看实际提取了哪些 class，比翻配置更直接。
动态拼接 class 会让 UnoCSS 完全失效
像 class="m-2 ${isActive ? 'text-blue-500' : 'text-gray-400'}" 或 className={`p-${size} bg-${color}-500`} 这类写法，UnoCSS 的默认 extractor 根本无法解析——它不运行 JS，也不展开模板字符串。
后果是：text-blue-500、p-4、bg-red-500 等规则不会进打包产物，页面一跑就缺样式。
可行解法：
- 改用
shortcuts显式声明组合：shortcuts: [['btn-active', 'text-blue-500 p-3']] - 启用
@unocss/preset-attributify，改写为<button m="2" text="{isActive" :></button>，attributify extractor 能识别属性值中的字面量 - 必须动态时，加
safeList强制生成（慎用）：safeList: ['text-${color}-500', 'p-${n}']，但会失去原子约束，且无法校验 color/n 是否真实存在
图标类没做 tree-shaking，体积可能悄悄翻倍
UnoCSS 的 @unocss/preset-icons 默认会加载整个图标集 JSON（比如 @iconify-json/mdi 有上万图标），但如果你只用了 i-mdi-home 和 i-mdi-settings，其余图标规则仍会被生成，除非显式开启 tree-shaking。
关键配置项：
- 确保
include/exclude合理：排除node_modules，否则图标 JSON 文件本身也会被 extractor 扫描，拖慢构建 - 图标调用必须用标准格式：
i-图标集-图标名，例如i-mdi-home；写成i-mdi-home-outline却没安装@iconify-json/mdi的 outline 子集，就会静默失败 - Vite 用户无需额外操作，tree-shaking 默认生效；Webpack 用户需确认
mode: 'production'已启用
验证是否生效：构建后检查 dist/ 下 CSS 文件里是否只出现你真正用到的 i-xxx 类名，而不是几百个未使用的图标选择器。
dist-chunk 模式对 MPA 有效，但 SPA 里反而增加请求
mode: 'dist-chunk' 让 UnoCSS 为每个异步 chunk（比如路由级 import('./pages/Home.vue')）生成独立 CSS 文件。这对多页应用（MPA）很实用——首页只加载首页样式，减少首屏 CSS 体积。
但在单页应用（SPA）中，它容易造成碎片化：
- 每个组件级异步导入都生成一个 CSS 文件，HTTP 请求变多
- 公共原子类（如
m-4、flex）重复出现在多个 chunk CSS 中，总大小未必下降 - SSR 场景下，
mode: 'dist-chunk'会导致 entry-client 注入的全局样式不可控，应改用mode: 'global'并手动指定入口范围
判断依据：先跑一次 build，用 rollup-plugin-visualizer 看 CSS 文件数量和重复率；如果 chunk CSS 总体积没降反升，说明当前项目更适合 mode: 'default' + 精简预设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
