如何用PurgeCSS删除生产环境中的无用CSS-css教程-PHP中文网

purgecss 仅基于静态字符串匹配删除未使用的 css 类，误删或漏删主因是 content 配置错误和插件顺序不当；需正确设置路径、确保编译后内容被扫描、合理配置 safelist 与插件顺序，并通过 dry-run 和 rejected 日志验证效果。

如何用purgecss删除生产环境中的无用css

PurgeCSS 不会自动删掉你项目里“看起来没用”的 CSS——它只删它明确看到的、静态出现的类名。绝大多数误删或漏删，根源都在 content 配置和插件顺序上。

content 路径配错：扫不到 class 就等于没写

它不执行 JS，也不解析 Vue/React 的响应式逻辑，只靠字符串匹配。你写 className={`btn ${type}-btn`}，PurgeCSS 看到的是 `btn ${type}-btn` 这个模板字符串，根本提取不出 primary-btn 或 danger-btn。

别用 glob.sync('./src/**/*.vue')：Windows 下路径分隔符失效，且读的是未编译的原始 .vue 文件，class="btn {{ type }}-btn" 里根本没有真实类名
改用绝对路径 + 显式扩展名：path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}')
如果用了 vite-plugin-css-injected-by-js 这类 JS 注入 CSS 的插件，它的输出不在 content 范围内，得手动加进 content 数组，否则直接清空
Vite 用户优先用 vite-plugin-purgecss，它在 Rollup 转换后钩子中运行，能拿到编译后的 class 字符串；Webpack 用户用 purgecss-webpack-plugin，别手写 new PurgeCSSPlugin()

PostCSS 插件顺序崩了：CSS 变成空文件

构建后 CSS 文件只剩 @charset "UTF-8";，或 Lighthouse 显示 “CSS 规则数为 0”，基本就是顺序错了。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须严格按顺序写：postcss-import → tailwindcss（如有）→ @fullhuman/postcss-purgecss → autoprefixer → cssnano
cssnano 默认开启 discardUnused: true，和 PurgeCSS 功能重叠，建议关掉：{ discardUnused: false }
Tailwind 项目别额外装 @fullhuman/postcss-purgecss——它和 tailwindcss 内置的 Purge 功能冲突，删掉 postcss.config.js 里多余的 purgecss 插件
Webpack 中 PurgeCSSPlugin 必须放在 mini-css-extract-plugin 之后，否则处理的是未提取的模块，不是最终输出的 CSS 文件

动态类名和特殊语法被漏删：hover、group-hover、[data-state=open] 全没了

默认提取器不认识伪类、属性选择器、嵌套语法，也不会展开正则或变量拼接。

在 safelist 加正则：/^(hover|focus|group-hover|data)-/、/\[.*\]/
启用 keyframes: true 和 fontFace: true，否则 @keyframes 和 @font-face 会被连带清除
对 [&_svg] 这类嵌套选择器，需自定义 defaultExtractor，或直接用 Tailwind v3+ 内置的 content 配置（推荐）
别依赖 @apply 或 @layer 生成的 class 出现在运行时——它们必须显式出现在源码字符串里，不能靠 JS 动态生成

验证是否真删对了：别信体积数字，要查实际渲染

上线后白屏、按钮没 hover 效果、modal 打不开，八成是 PurgeCSS 把真实用到的类干掉了。

启用 rejected: true 选项，看日志里哪些 selector 被判定为“无用”，比盲调配置高效得多
运行 purgecss --dry-run 检查哪些类名被识别、哪些被剔除，确认关键类如 is-open、hidden、bg-blue-500 是否在 safelist 或 content 中被覆盖
关闭 devtool: 'source-map'，否则 source map 会污染类名匹配，导致误删
检查 HTMLWebpackPlugin 生成的 dist/*.html 是否被纳入 content——如果启用了 inject: true 却没扫 dist 目录，就等于没扫真实 DOM 结构