PurgeCSS通过扫描文件识别并移除未使用的CSS类，减小文件体积，提升性能。首先安装@fullhuman/postcss-purgecss，再在postcss.config.js中配置content路径如['.//.html', './src//.js']，确保覆盖所有模板文件。为避免误删，需处理动态类名，可自定义extractor正则匹配或使用whitelist/whitelistPatterns保留关键样式。仅在生产环境启用，可与Webpack、Vite、Next.js等工具集成，在构建时自动清理冗余CSS，通常减少70%以上体积。注意更新文件后重新构建，确保扫描准确。
PurgeCSS 通过扫描 HTML、JavaScript 或其他模板文件，识别出实际使用的 CSS 类名，并移除未被引用的样式规则，从而大幅减小 CSS 文件体积。这对于使用大型 CSS 框架（如 Tailwind CSS、Bootstrap）的项目尤其有效，能显著提升页面加载速度和性能表现。
如何使用 PurgeCSS 基本配置
要开始使用 PurgeCSS，首先安装依赖：
npm install @fullhuman/postcss-purgecss --save-dev然后在 PostCSS 配置中加入 PurgeCSS 插件，例如在 postcss.config.js 中：
const purgecss = require('@fullhuman/postcss-purgecss')({ content: ['./**/*.html', './src/**/*.js'], // 扫描所有HTML和JS文件中的类名 defaultExtractor: content => content.match(/[\w-/:]+(?这样在生产环境中构建时，PurgeCSS 会自动清理未使用的 CSS。
立即学习“前端免费学习笔记（深入）”；
精准匹配内容路径避免误删样式
如果 PurgeCSS 扫描范围不准确，可能导致有用的样式被错误删除。确保 content 字段覆盖所有可能包含类名的文件：
- 包括 .html、.js、.jsx、.vue、.svelte 等视图层文件
- 使用 glob 模式匹配深层目录，如 './pages/**/*.js'
- 动态类名需特别处理，比如用正则提取 btn-(primary|secondary)
可通过自定义 extractor 提高识别准确率：
defaultExtractor: content => { const broadMatches = content.match(/[^"'`\s]*[^"'`\s:]/g) || [] const innerMatches = content.match(/[^"'`\s.()]*[^"'`\s.():]/g) || [] return [...broadMatches, ...innerMatches] }与构建工具集成实现自动化优化
PurgeCSS 可无缝集成到主流构建流程中：
- 搭配 Webpack 使用 purgecss-webpack-plugin
- 在 Vite 中通过 PostCSS 插件调用
- Next.js 用户可在 tailwind.config.js 中直接配置 purge 选项
- 静态站点生成器（如 Hugo、Jekyll）也可通过构建脚本调用
上线前自动运行，确保输出的 CSS 文件只保留必要样式。
注意事项与常见问题
使用 PurgeCSS 时需注意以下几点：
- 避免删除 JavaScript 动态添加的类名，可将关键类加入 whitelist
- 第三方组件库的样式可能被误删，建议通过 whitelistPatterns 保留
- 开发环境不要启用，仅在生产构建中使用
- 每次更新模板或 JS 后重新运行，保证扫描结果最新
合理配置后，PurgeCSS 能安全有效地缩减 CSS 文件大小，通常可减少 70% 以上冗余代码。
基本上就这些，关键是让 PurgeCSS 准确“看到”所有类名来源，再放心清理。不复杂但容易忽略细节。
