purgecss必须配合minicssextractplugin使用，因它只能处理已提取的独立css文件，而webpack默认将css打包进js；顺序应为minicssextractplugin→purgecss→cssminimizerplugin，且需关闭source-map、用绝对路径配置content、手动safelist动态类名与第三方库类。
Webpack里PurgeCSS插件必须配合MiniCssExtractPlugin使用
单独加purgecss-webpack-plugin不会生效，因为它的输入必须是已提取的CSS内容——而Webpack默认把CSS打包进JS里（style-loader注入），根本没生成独立CSS文件供它分析。
你得先用MiniCssExtractPlugin把CSS抽成.css文件，再让PurgeCSS去处理那个输出文件。
- 插件顺序不能错：
MiniCssExtractPlugin.loader→css-loader→postcss-loader（含PurgeCSS） - 如果用了
OptimizeCSSAssetsPlugin或CssMinimizerPlugin，PurgeCSS必须放在它们之前，否则压缩后选择器被重写，匹配失败 -
devtool: 'source-map'要关掉，否则source map里的类名干扰提取逻辑
content路径必须覆盖所有动态类名出现的位置
PurgeCSS只扫你写的字符串字面量，比如class="btn-primary"或className={`card card--${size}`}。但后者中的card--${size}不会被默认提取器识别，除非你把它加进safelist。
- 路径配置要用绝对路径：
path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,html,vue}') - 漏掉
.vue或.tsx文件，对应组件里的类名就进不了白名单，直接被删 - Tailwind的
hover:bg-blue-500、属性选择器[data-open]、BEM的block__element--modifier全得靠defaultExtractor重写或safelist兜底
第三方库CSS不能靠“扫描”自动保留
像import 'bootstrap/dist/css/bootstrap.min.css'这种写法，PurgeCSS压根不认——它不解析node_modules里的CSS，也不理解你JS里调了new Modal()会用到.modal类。
- 必须手动加
safelist：正则如/^modal-/、/^btn-/，或精确类名'swiper-slide' - 类名必须和最终HTML里渲染的一致，
ant-modal和ant-modal-wrap差一个连字符就白配 - 别往
content里塞node_modules/**，那只是让插件报错或卡死，不解决问题
PostCSS中用@fullhuman/postcss-purgecss容易失效
在postcss.config.js里配@fullhuman/postcss-purgecss，看似轻量，实则风险极高：它运行在JS编译前，扫不到className={styles.btn}或class="p-4 {{ modifier }}"这类模板语法；还常跟cssnano冲突，导致规则全空。
- 若坚持走PostCSS链，必须确保
postcss-purgecss在cssnano之前，且cssnano里关掉discardUnused: true - 插件顺序硬性要求：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano - 更稳妥的做法是弃用PostCSS方案，改用
purgecss-webpack-plugin，它能拿到Webpack编译后的AST，识别能力更强
.btn-lg或[data-state=open]，看是不是真没了，还是只是被压缩器缩成.a{...}了。没验证过的PurgeCSS配置，等于没配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
