PurgeCSS移除生产环境多余样式，显著减少CSS打包体积

在打包时使用了 PurgeCSS，但生成的 CSS 文件依然保留了动态生成的 class 类名？这是前端优化中非常容易遇到的典型问题。

为什么 PurgeCSS 没有删除你写的 class？

核心原因在于 PurgeCSS 的工作原理：它不会解析运行时生成的 class，只扫描项目源码中静态出现的字符串。也就是说，像 v-if="show 'active' : 'hidden'" 这样的条件渲染，或者通过 classList.add(dynamicClass) 动态添加的类名，PurgeCSS 在静态分析阶段是“看不见”的。

• 确保所有用到的 class 名，都在模板、JSX 或 Vue 单文件组件的 或 部分以纯文本形式出现。
• 如果使用 Tailwind CSS 并拼接动态 class（例如 class="text-${size}-sm"），需要在配置的 content 部分添加 defaultExtractor，或者显式将模式加入白名单，比如 whitelistPatterns: [/^text-/, /^bg-/]。
• Vue 项目需要特别注意： 中的 class 会被 Vue Loader 自动添加属性选择器（如 .btn[data-v-f3f3f]），PurgeCSS 默认能识别这种模式。但如果在 JavaScript 中手动操作类似 [data-v-xxx] 的属性来切换 class，就需要把这类属性选择器模式也添加到 extractors 配置中。

PurgeCSS 与 PostCSS 插件的执行顺序至关重要

插件顺序是另一个关键点。务必让 PurgeCSS 在 CSS 压缩（例如使用 cssnano）之前运行。如果顺序反了，CSS 压缩器可能会重命名或内联 class，导致 PurgeCSS 无法匹配到原始类名。

• 在 Webpack 环境下，检查 postcss.config.js 中的插件顺序，确保 purgecss 排在 cssnano 之前。
• Vite 用户相对省心：vite-plugin-purgecss 插件默认已处理好执行顺序。但如果手动配置了 build.cssCodeSplit = false，需要确认插件仍能作用于最终合并后的 CSS 字符串。
• 对于使用 Next.js 13+ App Router 的开发者，建议配合 @next/bundle-analyzer 验证产物体积。因为 Next.js 的 swc 编译器的 CSS 提取逻辑有时可能绕过 purgecss 的处理。

如何验证 PurgeCSS 真正删除了哪些规则？

不要仅凭最终 CSS 文件的大小变化来判断 PurgeCSS 是否生效——文件变小可能只是压缩的功劳。真正需要关注的是它移除了哪些具体的选择器规则。

• 启用 rejected: true 选项（或在 CLI 中使用 --rejected 参数），PurgeCSS 会输出一份被删除的选择器列表。
• 可以搭配 dryRun: true 选项进行“试运行”，它不会写入最终文件，而是打印统计信息，例如 { "css": "xx KB", "safelist": [], "rejected": 1240 }，让你一目了然。
• 需要警惕一些常见的“误删”情况：图标字体的 class（如 icon-home）、由 JavaScript 控制的动画 class（is-animating）、以及 BEM 命名法中的修饰符（btn--large 可能被误判为未使用）。这些都需要提前加入 safelist（安全列表）中。

Tailwind 用户：不要重复配置 PurgeCSS

对于 Tailwind CSS v3+ 用户，有一个重要提醒：Tailwind 本身已内置了基于 PurgeCSS 的优化机制，其配置文件中的 content 选项就是封装后的产物。如果额外安装和配置 purgecss 插件，反而容易引起配置冲突，导致优化失效。

• 检查并删除 postcss.config.js 中多余的 purgecss 插件，通常只保留 tailwindcss 和 autoprefixer 即可。
• 确保 tailwind.config.js 中的 content 数组覆盖了所有可能的模板文件路径，例如 ["./src/**/*.{js,jsx,ts,tsx,vue}"]，不要遗漏 .mdx 或 .svelte 等扩展名。
• 在开发环境下，如果想临时禁用 Purge 功能以方便调试样式，可以设置环境变量：TAILWIND_MODE=watch npm run dev，这样能避免样式清除干扰热更新。

最后，实际删减效果的好坏，很大程度上取决于你是否将所有动态 class 的生成模式都穷举并添加到了 safelist 或 whitelistPatterns 中。这一步最容易被忽略，结果就是打包后的体积数字看起来很漂亮，但页面一旦交互，样式就丢失了。