CSS怎样运用PurgeCSS剔除生产环境多余样式_大幅缩减CSS文件打包体积

PurgeCSS 不删除动态生成的 class，只识别源码中静态出现的 class 字符串；需通过 safelist、whitelistPatterns 或 defaultExtractor 处理动态情况，并确保其在 CSS 压缩前执行。

为什么 PurgeCSS 没删掉你写的 class？

它不解析运行时生成的 class，只扫描源码中**静态出现的字符串**。比如 v-if="show ? 'active' : 'hidden'" 或 classList.add(dynamicClass) 这类动态拼接，PurgeCSS 看不见。

• 确保所有用到的 class 名在模板、JSX、Vue SFC 的 <template> 或 <style scoped> 中以纯文本形式出现
• 如果用了 Tailwind + 动态 class（如 class="text-${size}-sm"），得在 content 配置里加 defaultExtractor 或显式列出白名单 whitelistPatterns: [/^text-/, /^bg-/]
• Vue 项目注意：<style scoped> 里的 class 会被自动加上属性选择器（如 .btn[data-v-f3f3f]），PurgeCSS 默认能识别；但如果你手动写了 [data-v-xxx] 在 JS 里切换 class，就得把这类属性也加进 extractors

PurgeCSS 和 PostCSS 插件的执行顺序很重要

必须让 PurgeCSS 在 CSS 压缩（如 cssnano）之前运行，否则压缩后 class 名被重命名或内联，PurgeCSS 就找不到原始匹配了。

• Webpack 场景下，检查 postcss.config.js 里插件顺序：purgecss 必须在 cssnano 之前
• Vite 用户注意：vite-plugin-purgecss 默认已处理顺序；但若手动配了 build.cssCodeSplit = false，要确认它仍作用于最终合并后的 CSS 字符串
• Next.js（13+ App Router）需配合 @next/bundle-analyzer 验证产物体积，因为 purgecss 可能被 swc CSS 提取逻辑绕过

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

别只看文件大小变化——可能只是压缩率提升。得看实际移除了哪些选择器。

• 启用 rejected: true 选项（或 CLI 的 --rejected），它会输出被删掉的选择器列表
• 搭配 dryRun: true 先试跑，不写入文件，只打印统计：{ "css": "xx KB", "safelist": [], "rejected": 1240 }
• 常见误删：图标字体 class（如 icon-home）、JS 控制的动画 class（is-animating）、BEM 的修饰符（btn--large 被当成未使用）——这些都得进 safelist

Tailwind 用户：别重复配置 PurgeCSS

Tailwind v3+ 内置了 content 配置，本质就是 PurgeCSS 的封装。再额外装 purgecss 插件反而容易冲突。

立即学习“前端免费学习笔记（深入）”；

• 删掉 postcss.config.js 里多余的 purgecss 插件，只留 tailwindcss 和 autoprefixer
• 确保 tailwind.config.js 的 content 数组覆盖所有模板路径：["./src/**/*.{js,jsx,ts,tsx,vue}"]，别漏掉 .mdx 或 .svelte
• 开发时想临时禁用（比如调试样式），加环境变量：TAILWIND_MODE=watch npm run dev，避免 purge 干扰热更新

实际删减效果取决于你是否把动态 class 的模式穷举进 safelist 或 whitelistPatterns，这点最容易被跳过——体积数字好看，但页面一交互就丢样式。