真正“无用”的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 当作无效内容跳过,但它实际仍触发了组件编译和样式注入——这种“半废弃”状态比明面上的冗余更危险。


















