PurgeCSS去除未使用CSS类教程

PurgeCSS 是一款强大的 CSS 未使用类清除工具，但其“静态扫描”机制常导致误删动态类名、JS 注入类、框架绑定样式（如 Vue 的 :class、Tailwind 的 @apply）及 CSS-in-JS 中的类——根本原因在于它不执行 JavaScript、不解析运行时逻辑。本文深入剖析误删根源，详解如何通过 safelist（支持正则与字符串）精准保留关键样式，并对比 Webpack（推荐 purgecss-webpack-plugin，强调 paths 覆盖与 extractors 配置）和 PostCSS（轻量但跨文件追踪弱、依赖手动 content 指定）两种接入方式的实战要点；更提供高效验证方法：启用 rejected 选项直击删除详情、浏览器实时检索、命令行独立测试，助你安全落地 PurgeCSS，在减小 CSS 体积的同时杜绝线上样式丢失风险。

为什么 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 解析