Webpack 中结合 PurgeCSS 清理未用 CSS 的核心是准确指定含类名的源文件路径并合理配置白名单，需用 purgecss-webpack-plugin 扫描 HTML/JSX/Vue/TSX 等文件，配合 whitelistPatterns 和 whitelist 处理动态类名，确保插件在 MiniCssExtractPlugin 之后、压缩之前执行。
在 Webpack 中结合 PurgeCSS 清理未使用的 CSS，核心是让 PurgeCSS 扫描你项目中所有可能用到类名的地方（HTML、JSX、Vue、TSX 等），再比对并剔除 CSS 中未被实际引用的选择器。关键不在“删 CSS”，而在“准确告诉它哪些类名可能出现”。
安装必要依赖
使用官方推荐的 purgecss-webpack-plugin（PurifyCSS-Webpack 已停止维护）：
- 运行命令安装：
npm install -D purgecss-webpack-plugin glob-all - 如果你用 MiniCssExtractPlugin 提取 CSS，也要确保已安装：
npm install -D mini-css-extract-plugin - 注意：不需要单独装
purgecss包，插件内部已包含
配置 content 扫描路径（最关键一步）
PurgeCSS 不会自动猜你写了哪些 class，必须显式指定所有含类名的源文件。路径要覆盖全部模板和逻辑层：
- React/Vue/TSX 项目建议这样写：
globAll.sync([<br> path.join(__dirname, 'src/**/*.{js,jsx,ts,tsx,vue,html}'),<br> path.join(__dirname, 'public/*.html')<br>]) - Vue 单文件组件需额外配置 extractor，否则
<template>里的 class 可能漏扫 - 避免只写
src/*.html—— 这会跳过 JS 中动态拼接的className={`btn-${type}`}类名
处理动态类名与白名单
JS 或框架运行时生成的类（如 is-active、bg-blue-500、d-md-flex）默认不会被识别，必须加白名单：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用
whitelistPatterns匹配前缀或模式：whitelistPatterns: [/^d-/, /^bg-/, /^is-/, /^active/] - 保留特定工具类或 JS 控制类：
whitelist: ['html', 'body', 'fade', 'show', 'modal-open'] - Tailwind 用户强烈建议启用
defaultExtractor并替换为支持短横线和驼峰的正则
集成进 Webpack 插件链
确保 PurgeCSS 插件在 CSS 提取之后、压缩之前执行（顺序很重要）：
- 若用
MiniCssExtractPlugin，插件顺序应为：
MiniCssExtractPlugin → PurgecssPlugin → CssMinimizerPlugin - 示例插件配置片段：
new PurgecssPlugin({<br> paths: globAll.sync(...),<br> whitelistPatterns: [...],<br> keyframes: true,<br> fontFace: true<br>}) -
keyframes: true保留动画帧，fontFace: true保留字体声明，避免样式丢失
不复杂但容易忽略：PurgeCSS 效果好坏，80% 取决于 content 路径是否完整、白名单是否合理。扫得全，才删得准。
