优化 Web 性能：移除未使用的 CSS 规则（Unused CSS Rules）

在 Web 开发中，CSS 文件的体积和复杂性会显著影响页面加载速度。Google 的 Lighthouse 工具在性能审计中特别关注“未使用的 CSS 规则”（Unused CSS Rules），指出多余的样式会增加文件大小，拖慢页面渲染。本文将基于 Chrome 开发者文档，深入探讨未使用 CSS 规则的定义、影响及优化方法，助你在2025年的 Web 项目中提升性能。

---

1. 什么是未使用的 CSS 规则？

1.1 定义

未使用的 CSS 规则（Unused CSS Rules）是指在页面加载和渲染过程中未被任何 HTML 元素引用的样式规则。这些规则可能是遗留代码、通用样式库的一部分，或是为未来功能预留的样式。

1.2 未使用 CSS 的来源

• 通用样式库：如 Bootstrap、Tailwind，未完全使用的部分。
• 遗留代码：项目迭代中未删除的旧样式。
• 动态内容：某些规则仅在特定条件下生效，但在当前页面未触发。

1.3 Lighthouse 的关注点

Lighthouse 分析页面加载时的 CSS 覆盖率（Coverage），识别未使用的规则，并计算移除它们可节省的字节数。

---

2. 未使用 CSS 规则的影响

2.1 文件体积增加

未使用的规则使 CSS 文件变大，例如，一个 100KB 的文件可能包含 40KB 的无用代码。

2.2 加载和解析时间延长

浏览器需要下载和解析这些无用规则，增加“首次内容绘制”（FCP）和“可交互时间”（TTI）的时间，尤其在低速网络下。

2.3 性能得分下降

Lighthouse 的性能评分因未使用 CSS 而降低，可能影响用户体验和 SEO。

---

3. 如何识别未使用的 CSS 规则？

3.1 使用 Lighthouse

1. 打开 Chrome 开发者工具（F12）。
2. 切换到“Lighthouse”选项卡。
3. 选择“性能”类别，生成报告。
4. 查看“机会”下的“移除未使用的 CSS”（Remove Unused CSS），列出问题文件及节省字节。

3.2 使用 Coverage 工具

1. 在开发者工具中打开“Coverage”面板（Ctrl+Shift+P 输入“Coverage”）。
2. 点击“开始记录”（Record），刷新页面。
3. 查看 CSS 文件的覆盖率，红色部分表示未使用代码。

3.3 手动检查

• 检查 CSS 文件中的选择器，确认是否与 HTML 元素匹配。
• 搜索通用库中未使用的类或 ID。

---

4. 优化未使用 CSS 规则的策略

4.1 使用 PurgeCSS

PurgeCSS 是一个强大的工具，用于移除未使用的 CSS：

const { PurgeCSS } = require('purgecss');
const purgeCSSResult = await new PurgeCSS().purge({
    content: ['*.html'], // HTML 文件
    css: ['style.css'],  // CSS 文件
});

• 步骤：
  1. 指定 HTML 和 CSS 文件。
  2. 分析内容，移除未匹配的规则。
  3. 输出优化后的 CSS。

4.2 构建工具集成

1. Webpack
   • 使用 purgecss-webpack-plugin：

     const PurgeCSSPlugin = require('purgecss-webpack-plugin');
     const glob = require('glob');
     module.exports = {
         plugins: [
             new PurgeCSSPlugin({
                 paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
             }),
         ],
     };
     

2. Vite
   • 使用 vite-plugin-purgecss：

     import purgeCSS from 'vite-plugin-purgecss';
     export default {
         plugins: [purgeCSS()],
     };
     

4.3 按需加载样式库

• Bootstrap：仅引入所需模块：

  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/buttons";
  

• Tailwind CSS：内置 Purge 功能：

  module.exports = {
      purge: ['./src/**/*.{html,js}'],
  };
  

4.4 内联关键 CSS

将首屏所需 CSS 内联，减少外部文件中的未使用规则：

<style>
    body { margin: 0; }
    .hero { font-size: 24px; }
</style>

4.5 动态加载 CSS

对于条件性样式，使用动态导入：

if (condition) {
    import('./conditional.css');
}

---

5. 示例：优化前后对比

优化前

/* style.css */
body {
    margin: 0;
}
/* 未使用的规则 */
.unused-class {
    color: red;
    padding: 10px;
}
.hero {
    font-size: 24px;
}

• 文件大小：约 150 字节。
• 未使用字节：约 50%。

优化后

/* style.min.css */
body{margin:0}.hero{font-size:24px}

• 文件大小：约 40 字节。
• 移除未使用规则，节省 73% 字节。

效果

• 下载时间从 200ms 降至 60ms。
• Lighthouse 性能得分提升 5-10 分。

---

6. 注意事项

• 动态内容：确保分析覆盖所有页面状态（如切换主题）。
• 调试版本：保留未压缩版本用于开发。
• 测试：优化后验证样式是否丢失。

---

7. 总结

未使用的 CSS 规则是 Web 性能优化的常见问题，通过工具如 PurgeCSS 和构建集成，可以有效移除冗余代码，减少文件体积，提升加载效率。Lighthouse 的审计为我们提供了优化方向，而本文介绍的策略则是实践指南。