PurgeCSS在移动端特别关键，因其能精准剔除未用CSS，将Tailwind/Bootstrap等冗余样式从2–3MB压缩至40–60KB，满足AMP≤75KB硬性要求，避免3G下首屏延迟翻倍及低端机解析超耗300ms+。
移动端大流量页面的 CSS 体积必须压到 75KB 以内，否则 AMP 会拒绝加载，3G 网络下首屏渲染延迟直接翻倍。PurgeCSS 不是“锦上添花”，而是上线前必过的一关。
为什么 purgecss 在移动端特别关键
移动端用户对白屏时间极度敏感，而未使用的 CSS 会阻塞渲染、增加解析开销。Tailwind 或 Bootstrap 的完整 CSS 文件动辄 2–3MB，但真实页面平均只用到 10–15% 的类名。PurgeCSS 能把这部分冗余直接砍掉，不是压缩，是精准剔除。
- AMP 页面强制要求 CSS ≤ 75KB，
purgecss是达标最可靠的方式 - 低端 Android 设备解析 500KB CSS 可能多耗 300ms+，
purgecss后通常剩 40–60KB，解析时间下降 60%+ - 动态类名（如
text-${color}、bg-opacity-${n}）必须显式配置safelist，否则会被误删——这是移动端最常踩的坑
postcss-purgecss 在生产环境的最小可行配置
别用 CLI 或独立 API，移动端项目必须走 PostCSS 流程，和 tailwindcss、autoprefixer 串联执行，确保 class 提取和 purging 发生在构建最后阶段。
在 postcss.config.js 中这样写：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
content: [
'./src/**/*.{html,js,jsx,ts,tsx,vue}',
'./public/**/*.html'
],
safelist: [
'html', 'body', 'amp-*',
/^animate-/,
/^bg-(red|blue|green|yellow|gray)-/,
/^text-(sm|base|lg|xl)$/,
{ pattern: /-enter-active|-leave-active/, variants: ['hover', 'focus'] }
],
keyframes: true,
fontFace: true
})
].filter(Boolean)
}
-
content必须覆盖所有模板文件，包括public/index.html（SPA 的入口 HTML 很容易漏） -
safelist里amp-*是硬性要求，否则 AMP 校验失败；html/body是防止重置样式丢失 -
keyframes: true和fontFace: true必须开启，否则动画和自定义字体失效
如何验证 purgecss 没删错样式
光看文件大小下降没用，得确认关键交互状态还在。不能只测首页，要覆盖：带 modal 的弹窗页、表单提交成功页、加载中 skeleton、错误 fallback 页。
- 打开 Chrome DevTools →
Rendering→ 勾选Highlight updates，快速滚动/点击，观察是否出现意外的样式闪烁或回退 - 运行
purgecss --config purgecss.config.js --rejected查看被删掉的选择器列表，重点扫一眼hover:、active:、disabled:相关类是否被误杀 - 真机测试时禁用缓存（Safari 开发者菜单 / Chrome Remote Debugging），避免旧 CSS 干扰判断
真正难的不是配置 purgecss，而是识别哪些动态类名是“业务必需”而非“框架默认”。比如 btn--${status} 要加正则，但 icon-${name}-sm 可能根本没在 JS 里拼过，加了反而留了垃圾。这需要你翻一遍组件库源码或 runtime 打印出的 class 列表，而不是凭感觉写 safelist。
