CSS使用PurgeCSS精简生产环境样式，大幅减小文件体积

PurgeCSS 能显著减小生产环境 CSS 体积，但它仅基于源码中静态出现的 class 字符串进行清理，对运行时动态生成的 class（如 Vue 的 v-if 表达式、JS 的 classList 操作或 Tailwind 的模板字符串）完全“视而不见”，因此必须通过 safelist、正则白名单或自定义提取器显式声明这些动态模式；同时需严格确保它在 CSS 压缩（如 cssnano）之前执行，否则压缩重命名会破坏匹配逻辑——配置不当不仅可能导致图标、动画、BEM 修饰符等关键样式被误删，更会在交互时突然失样式，表面体积下降明显，实则埋下线上隐患。

为什么 PurgeCSS 没删掉你写的 class？

它不解析运行时生成的 class，只扫描源码中**静态出现的字符串**。比如 v-if="show ? 'active' : 'hidden'" 或 classList.add(dynamicClass) 这类动态拼接，PurgeCSS 看不见。

• 确保所有用到的 class 名在模板、JSX、Vue SFC 的