PurgeCSS优化Webpack，清理无用CSS更高效
PurgeCSS虽能高效清理无用CSS，但其静态分析本质导致它对动态类名（如模板字符串拼接、JS运行时注入）、未编译的.vue/.tsx源文件、错误的PostCSS插件顺序以及Tailwind特殊语法（嵌套、变体、属性选择器）完全“视而不见”——真正的问题从来不是配置遗漏，而是工具能力边界与项目实际运行逻辑的错位；要真正落地提效，必须绕过默认扫描路径陷阱、改用AST解析模式、严格校准插件执行顺序，并定制提取器以覆盖现代前端框架的真实类名生成方式。
PurgeCSS 在 Webpack 中删不掉动态类名，不是配置漏了，是它根本没看到那些字符串。 它只认静态写死的 class="btn active"，对 className={`btn ${type}-btn`} 或 el.classList.add('hidden') 这类运行时拼接、注入的行为完全无感。默认扫描路径再全也没用。
Webpack 插件里 paths 配置为什么总扫不到 .vue/.tsx 文件
常见错误现象：PurgeCSSPlugin 构造时传的 paths 用 glob.sync('./src/**/*.vue')，但构建后发现所有 Tailwind 工具类都被清空了；No files found 报错或输出 CSS 体积没变。
根本原因：Webpack 插件执行时机太早，此时 .vue 还没被 vue-loader 编译成 JS 字符串，PurgeCSS 扫的是原始模板，里面没有 class 字面量。
- 改用
glob-all+ 显式扩展名组合，确保覆盖编译产物路径（如./dist/**/*.js），但更稳妥的是—— - Vue/React 项目直接换
vite-plugin-purgecss或purgecss-webpack-plugin的modules模式（支持解析 AST） - 路径必须是绝对路径，
path.join(__dirname, 'src', '**', '*.{js,vue}')比硬写./src/**/*.vue更可靠，尤其在 Windows 下
postcss.config.js 里插件顺序错位导致白屏或空 CSS
常见错误现象：构建后页面样式全丢，DevTools 里看到 CSS 文件内容为空，或只剩 @charset "UTF-8";；Lighthouse 报“CSS 规则数为 0”。
根本原因：@fullhuman/postcss-purgecss 放在 cssnano 后面，后者把已删的选择器相关声明合并优化，产出损坏规则；或者和 autoprefixer 顺序颠倒，导致带前缀的选择器无法匹配。
- 正确顺序固定为：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano cssnano必须关掉discardUnused：{ discardUnused: false }，否则和 PurgeCSS 功能重叠，可能二次误删- 如果用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在 PurgeCSScontent范围内，会被直接清空——得手动加进content数组或禁用该插件
动态类名、Tailwind 特殊语法（如 [&_svg]）被漏删或误删
常见错误现象：hidden、is-open 突然失效；[&_svg]、[data-theme="dark"] 对应的样式消失；@apply bg-red-500 hover:bg-red-600 中的 hover: 类没保留。
根本原因：PurgeCSS 默认提取器只识别基础 class/id 字符串，不解析 CSS 嵌套语法、属性选择器、伪类、Tailwind 的变体前缀。
- 必须配
defaultExtractor自定义提取逻辑，例如 Vue 项目中过滤掉
