17370845950

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，否则没有回退机制。