PurgeCSS 误删样式因不解析动态类名、JS 注入类及框架绑定，需用 safelist 显式保留；Webpack 接入推荐 purgecss-webpack-plugin 并配全 paths 与 extractors；PostCSS 方式轻量但跨文件追踪弱；验证应启用 rejected 选项查删减详情。
为什么 PurgeCSS 有时删掉了该留的样式
PurgeCSS 默认只扫描 HTML、JS、Vue 等模板文件中的 class 字符串，不会执行 JS 逻辑，也不解析动态拼接的类名。比如 className={`btn ${isPrimary ? 'btn-primary' : 'btn-secondary'}`} 这种写法，PurgeCSS 看不到 btn-primary 和 btn-secondary 实际被使用，就会误删。
- 动态类名必须显式加入
safelist（白名单），支持正则：/^btn-/或字符串：'btn-primary' - 框架特定类（如 Tailwind 的
@apply、Vue 的:class绑定）需启用对应插件或配置extractors - HTML 中通过 JS 注入的类（如
el.classList.add('hidden')）同样不会被捕获，得手动保留在safelist中
如何在 Webpack 中正确接入 PurgeCSS
直接用 purgecss-webpack-plugin 比手写 loader 更可靠，它能自动读取 Webpack 的 entry 和 resolve.alias，避免路径匹配失败。
- 确保
paths配置覆盖所有模板文件：例如[path.join(__dirname, 'src/**/*.{html,vue,js}')] - 若用 Vue 单文件组件，必须设置
extractors解析内容，否则class="foo"不会被识别 - 不要和
MiniCssExtractPlugin的ignoreOrder: true冲突——PurgeCSS 应在 CSS 提取之后运行，顺序错会导致空输出
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
safelist: [/^swiper-/, 'active', 'show'],
keyframes: true,
fontFace: true
})PostCSS 插件方式是否更轻量
是，但限制明显：PostCSS 版本（postcss-purgecss）不支持多入口分析，只处理当前 CSS 文件的依赖上下文，适合纯 CSS 项目或 Rollup 场景。
- 无法跨文件追踪类引用，比如 A.css 里写了
.btn，B.js 里用了class="btn"，它看不到 B.js - 必须手动传入
content数组指定扫描路径，漏一个就可能误删 - 对
@import嵌套的 CSS 文件支持不稳定，建议优先用 Webpack/Parcel/Vite 官方集成方案
验证 PurgeCSS 是否生效的最快方法
别只看打包体积变化——那可能是压缩或其它优化导致的。真正要确认的是“哪些类被删了”，以及“删得对不对”。
立即学习“前端免费学习笔记（深入）”；
- 加
rejected: true选项，它会在控制台打印所有被移除的类名，快速定位误删项 - 本地起服务后，在浏览器里搜索某个疑似被删的类（如
bg-red-500），看是否还存在于标签或内联style中 - 用
purgecss --css src/index.css --content src/**/*.js --out dist/命令行单独测试，绕过构建工具干扰
最常被忽略的是 CSS-in-JS 和 data-* 属性绑定的类（如 data-class="tooltip"），这些必须进 safelist，否则没有回退机制。
