CSS 覆盖率与未使用样式

大型 CSS 文件通常包含当前页面上不存在的组件样式。每个未使用的字节都会增加解析时间、CSSOM 构建时间和传输大小。在任何给定页面上，典型的生产应用可能有 90% 或更多的 CSS 未被使用。

打开 DevTools → 覆盖率面板（Cmd+Shift+P → Coverage）。开始记录，与页面交互，然后停止记录。该面板会显示每个 CSS 文件的使用百分比，并用红色突出显示未使用的规则。将覆盖率数据导出为 JSON 以便分析。

PurgeCSS 会扫描您的 HTML、JS 和模板文件，查找类名并移除未使用的 CSS 规则。配置内容 glob，使其匹配所有可能引用类名的文件。将动态使用的类（由 JS 添加）加入白名单，以防止被意外移除。

Tailwind 的 JIT 编译器只会生成模板中实际使用的工具类。生成的 CSS 非常小——完整应用通常只有 5–15KB——因为未使用的工具类根本不会生成。这就是理想的清除结果。

在 webpack 或 Vite 配置中，添加 PurgeCSS，并设置覆盖所有模板文件的内容 glob。白名单选项支持字符串、正则表达式以及 deep-safelist，适用于处理 Headless UI 等库产生的复杂动态类模式。

CSS Modules 会为每个文件生成唯一的类名，并通过打包器配置对未使用的模块进行树摇。只有导入的 CSS 模块会被包含在打包结果中；组件共置可以自然地消除未使用的全局样式。

在 Next.js 等框架中按路由进行 CSS 代码拆分（按页面提取 CSS），或者对 CSS modules 使用动态导入。每个页面只加载自己的样式，使按页面而非按整个应用进行覆盖率分析变得有意义。

Lighthouse 的“减少未使用的 CSS”审计会估算移除未使用规则后可能节省的字节数。它会识别未使用比例较高的具体样式表资源。请将其作为确定审计优先顺序的指南，先检查最值得关注的文件。

覆盖率分析只能记录分析期间可见的状态。必须在记录覆盖率时手动触发悬停状态、模态框打开状态、错误状态和已认证状态，以免错误地清除这些状态所需的样式。

随着功能被移除，单体全局样式表会逐渐积累未使用的 CSS。组件级 CSS（CSS Modules、Styled Components、Tailwind 工具类）更容易清理，因为样式与组件放在一起，可以一并移除。

对于大型遗留 CSS 文件：首先以仅报告模式使用 UnCSS 或 PurgeCSS。按照使用频率对规则排序。提取并删除明显未使用的第三方插件样式。请逐步进行，以免意外移除边缘状态所需的样式。

Chrome DevTools 覆盖率面板测量什么？

借助 DevTools 覆盖率和 Lighthouse 进行 CSS 覆盖率分析，可以识别未使用的规则。PurgeCSS 和 Tailwind JIT 会自动消除无效代码。CSS Modules 和按路由拆分可以防止未使用样式不断累积。结合使用这些方法，可以将 CSS 负载和解析时间降至最低。