PurgeCSS通过分析源代码中实际使用的类名，移除未引用的CSS规则，减小文件体积。支持独立使用或集成到Webpack、Vite、PostCSS等工具。以PostCSS集成为例，需安装@fullhuman/postcss-purgecss并配置content字段指定扫描路径，如HTML、JS、TS、JSX文件。关键配置包括content（扫描文件）、extractor（自定义提取逻辑）、whitelist（保留动态类名）、keyframes（保留动画）。常见问题有误删动态生成的类名，如拼接类名class="btn btn-${type}"，应改为完整写法或加入白名单；第三方库类名可用whitelistPatterns正则匹配保留。使用Tailwind时建议启用其内置purge功能而非单独引入PurgeCSS。正确配置可安全高效清除无用样式，提升性能，核心是覆盖所有动态类来源。
PurgeCSS 是一个高效的工具，用于删除项目中未使用的 CSS 样式，从而显著减小样式文件体积。它通过分析你的源代码（如 HTML、JSX、Vue 等）中实际用到的类名，与 CSS 文件中的选择器进行比对，移除那些从未被引用的规则。
基本使用方式
在项目中使用 PurgeCSS 通常有两种方式：独立调用或集成到构建工具中（如 Webpack、Vite、PostCSS）。
以 PostCSS 集成为例：
module.exports = {plugins: [
require('tailwindcss'),
require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html', './src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx'],
defaultExtractor: content => content.match(/[\w-/:]+(? })
]
};
关键配置项说明
确保 PurgeCSS 正确识别所有可能用到的类名，配置需准确：
立即学习“前端免费学习笔记（深入）”；
- content：指定需要扫描的文件路径，包括 HTML、JS、TS、JSX、Vue 等。路径必须覆盖所有模板和组件
- extractor：自定义提取器，用于处理特殊语法（如 React 中的动态类名）
- whitelist：保留某些即使未被检测到的类名，例如动画类或 JS 动态添加的类
- keyframes：设为 true 可保留 CSS 动画帧，防止动画失效
常见问题与规避
PurgeCSS 容易误删动态生成的类名，需特别注意：
- 避免因拼接类名导致无法识别，如 class="btn btn-${type}"，应写成完整形式或加入 whitelist
- 第三方组件库的类名需手动保留，可通过 whitelistPatterns 匹配正则保留
- 使用 Tailwind 时建议配合其内置的 purge 选项，而非单独使用 PurgeCSS
基本上就这些。只要配置好扫描范围和提取逻辑，PurgeCSS 能安全有效地清理无用样式，提升页面性能。关键是确保不遗漏任何动态类名的来源。
