真正“无用”的CSS是指构建产物中未被任何.vue模板、pages.json、manifest.json或JS字符串实际引用，且未被@apply、:deep()等间接调用的类名；H5平台易误删uni-app内部类，需配置postcss-purgecss的content路径、extractor和whitelist，或改用unocss按需生成。
uni-app 项目里哪些 CSS 真的没用？别靠猜
直接删 static/ 下的 CSS 文件或注释掉样式，大概率清不干净，还可能误删正在被 easycom 或条件编译引用的类。真正“无用”的 CSS 是指：在最终构建产物中，没有任何 .vue 模板、pages.json、manifest.json 或 JS 字符串里实际出现过的类名（比如 class="btn-primary"），且未被 @apply、:deep()、::v-deep 等方式间接调用。H5 平台尤其容易误判——因为 uni-app 编译器会注入大量内部类（如 .uni-page-wrapper），@fullhuman/postcss-purgecss 默认规则会把它们当“死代码”干掉，导致白屏或布局崩坏。
用 @fullhuman/postcss-purgecss 清理前必须改这三处
这个插件不是装上就能开箱即用，尤其对 uni-app 的多端构建结构很敏感。不调整就跑，90% 情况下 H5 页面样式全丢，App 和小程序反而没事——因为它们走的是不同样式注入路径。
- 必须显式加入
content路径：除了./src/**/*.vue，还得加./pages.json和./manifest.json，否则tabBar图标类、页面 transition 类全被误删 - 禁用默认的
defaultExtractor，换成能识别 uni-app 特殊语法的正则：比如匹配class="{{'a b ' + (show ? 'c' : '')}}"这种动态拼接，原 extractor 会漏掉c - 在
whitelist里硬加 uni-app 内部类前缀：['uni-', 'u-', 'scroll-view', 'swiper-item']，否则scroll-view的滚动条样式、uni-icons的 base class 全消失
更安全的替代方案：用 unocss 替代“清理”，从源头控制
与其花时间清理残留 CSS，不如让“没写的类根本不出现在产物里”。unocss 是目前 uni-app 生态中最适配的原子化方案，它不扫描源码，而是按需生成——你模板里写了 class="text-red-500 p-4 flex"，构建时才生成对应 CSS 规则，没写的类连字节都不会进包。
- 配置
unocss.config.js时，务必启用preflights: false，否则它会自动注入 normalize.css，和 uni-app 自带重置冲突 - 若项目已有大量传统 class，可用
shortcuts映射过渡：{ 'btn': 'px-4 py-2 bg-blue-500 text-white rounded' }，避免重写模板 - 注意
extractor要兼容v-html场景：如果某处用v-html渲染富文本并含 class，得手动在content里加对应 JS 文件路径，否则那些 class 不会被识别
真正要删的不是 CSS，是“没人引用的组件和静态资源”
很多开发者盯着 CSS 清理，结果发现包体积只降了 5KB——因为真正吃体积的是未引用的图片、字体、SVG 和 Vue 组件。CSS 本身在现代打包下占比极小，而一张未压缩的 PNG 就可能顶 200KB。
- 运行
node findUnusedComponents.js ./（来自社区工具），它能识别 easycom 自动引入、import()动态加载、甚至components: { [name]: comp }对象注册的组件是否真实被用到 - 对
static/目录执行node findUnusedAssets.js ./static --exts=png,jpg,svg,ttf，它会反向扫描所有.vue和 JS 中的require('./static/xxx.png')、url(../static/xxx.svg)、font-family: "iconfont"等引用点 - 删完后记得清
unpackage/和node_modules/.cache，否则下次 build 可能复用旧缓存，体积统计不准
最常被忽略的是：pages.json 里注释掉的页面路径，比如 // "pages/test/test"，会被 purgecss 当作无效内容跳过，但它实际仍触发了组件编译和样式注入——这种“半废弃”状态比明面上的冗余更危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
