unocss 通过构建时按需生成原子 css 规则实现极致体积优化：仅提取源码中真实使用的 class，跳过未出现的组合，预设精简、模块可摇树，但依赖 extractor 准确性。
因为 Atomic CSS 不是“删掉没用的”，而是“压根不生成没用的”——UnoCSS 构建时只扫描你代码里真实出现的 class 字符串，比如只写了 mt-2 和 text-blue-600，最终 CSS 里就只有这两条规则，mt-1、text-red-500 等根本不会进打包产物。
UnoCSS 的按需生成不是 post-process，而是 build-time 解析
传统工具如 PurgeCSS 是先生成全部 4000+ 类（Tailwind 默认），再扫描 HTML 做减法；UnoCSS 在构建阶段就解析源码中的 class 字符串，直接跳过未出现的组合。这意味着：
-
@unocss/core本身仅约4.2 KiB（brotli 压缩后），且不依赖任何外部 CSS 处理库 - 预设如
preset-mini只含基础原子（spacing / color / font / flex 等高频项），不带断点变体或图标等可选模块 - 提取器（extractor）默认只识别
.vue、.tsx、.html中的 class 属性，不会误抓注释或字符串字面量
原子类复用率高，规则数不随组件数量线性增长
传统 CSS 里每写一个新组件，大概率新增选择器；Atomic CSS 则靠组合已有原子实现新样式。例如：
10 个不同按钮分别用 px-4 py-2 bg-indigo-600 text-white rounded、px-3 py-1 bg-gray-200 text-gray-700 rounded-sm……实际只生成 8–10 条原子规则，而非 10 组独立选择器。
关键前提是你收敛了设计系统：spacing 控制在 8 档、colors 限定 12 种主色、禁用 mt-[3.7px] 这类任意值语法——否则原子会失控爆炸。
Tree-shaking 直接作用于预设和自定义规则
UnoCSS 的摇树不是靠静态分析，而是基于实际使用路径裁剪功能模块：
- 没用到
hover:变体？对应伪类逻辑不参与生成 - 没引入
preset-icons？图标 CSS 完全不会打进包 - 配置里没声明
dark:前缀？深色模式相关逻辑被剔除 - 自定义 rule 如
['btn', { padding: '8px 16px' }]，若模板中没出现btn，这条规则也不会输出
真正容易被忽略的点在于：体积压缩效果高度依赖构建时的 class 提取准确性。一旦 extractor 漏掉动态拼接的 class（如 class="mt-${size}"），对应规则就不会生成；而误识别字符串（如日志里写了 "text-red-500"）又会导致冗余规则注入。这类问题不会报错，但会让体积优化失效——得靠 unocss --inspect 实时验证生成结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
