unocss按需生成是不生成未使用的css规则，而非删除；需确保content配置覆盖所有含class的文件，避免运行时拼接类名，优先用shortcuts或attributify，启用dist-chunk模式优化mpa，精简预设和变体。
UnoCSS 的按需生成不是“删掉没用的 CSS”，而是根本不去生成它——只要你的 HTML、Vue、JSX 里没出现 m-4 或 text-blue-600，最终打包产物里就不会有对应规则。这是体积削减最彻底的方式。
确保 UnoCSS 在构建时扫描真实源码路径
UnoCSS 默认只扫描 .html、.vue、.tsx 等常见后缀，但如果你的 class 是动态拼接或来自字符串模板（比如 `m-${size}`），默认扫描会漏掉。
- 检查
uno.config.ts中的content配置是否覆盖所有含 class 字符串的文件，例如：content: { files: ['src/**/*.{html,js,ts,vue,svelte,jsx,tsx}'] } - 若使用动态类（如
class={dynamicClass}），必须显式添加extractors或改用shortcuts预定义组合 - Vite 用户注意：不要在
vite.config.ts里重复配置include，以uno.config.ts的content为准
避免在运行时拼接原子类名
UnoCSS 的静态分析无法解析运行时计算的 class 字符串，比如 class="m-2 text-${color}" 或 className={`p-4 ${isActive ? 'bg-blue-500' : ''}`}，这类写法会导致对应规则无法被识别和生成。
- 改用
shortcuts显式声明组合：shortcuts: [['btn-primary', 'px-4 py-2 bg-blue-500 text-white rounded']]
- 对条件类，拆成明确的原子类组合：
class="p-4 bg-blue-500 text-white rounded hover:bg-blue-600"而非靠 JS 拼接 - 若必须动态，配合
attributify模式（启用后支持border="2 red-500"写法）并确保其 extractor 已启用
启用 dist-chunk 模式做页面级代码分割
单页应用（SPA）可能影响不大，但多页面应用（MPA）中，dist-chunk 模式能进一步隔离样式，让每个路由只加载自己需要的 CSS 规则。
- 在
vite.config.ts中设置：plugins: [UnoCSS({ mode: 'dist-chunk' })] - 该模式下，Vite 会为每个异步 chunk（如
import('./pages/Home.vue')）生成独立 CSS 文件 - 注意：需配合 Vite 的
build.rollupOptions.output.manualChunks合理切分逻辑，否则 chunk 过多反而增加 HTTP 请求 - 不适用于 SSR 场景下的
entry-client全局样式注入，此时应改用mode: 'global'并手动控制入口范围
禁用未使用的预设和规则
UnoCSS 默认启用 @unocss/preset-uno，但它包含大量响应式、深色模式、动画等规则——如果你项目完全不用 dark: 或 motion-safe:，这些规则仍会被扫描器当作潜在候选，拖慢构建且可能意外命中。
- 精简预设：只引入实际需要的 preset，例如仅用基础工具类就去掉
@unocss/preset-attributify和@unocss/preset-icons - 关闭特定变体：
theme: { variants: { dark: false, motion: false } } - 自定义
rules时避免宽泛正则，例如/^m-.*$/会强制扫描所有以m-开头的字符串，而/^m-(\d+|\d+\.\d+)$/更安全
真正决定体积上限的，不是你装了多少 preset，而是你模板里实际写了哪些 class 字符串。任何绕过静态分析的写法（运行时拼接、第三方组件未声明 class 来源、服务端渲染时 class 被动态注入）都会导致规则缺失或冗余，这点比配置优化更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
