IT评测·应用市场-qidao123.com技术社区

标题: 优化 Web 性能：移除未使用的 CSS 规则（Unused CSS Rules） [打印本页]

---

作者: 丝    时间: 2025-4-11 00:57
标题: 优化 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

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

3.2 使用 Coverage 工具

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

3.3 手动查抄

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

---

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

4.1 使用 PurgeCSS

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

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

复制代码

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

4.2 构建工具集成

• Webpack
  
  
  
  • 使用 purgecss-webpack-plugin：
    1. const PurgeCSSPlugin = require('purgecss-webpack-plugin');
    2. const glob = require('glob');
    3. module.exports = {
    4.     plugins: [
    5.         new PurgeCSSPlugin({
    6.             paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    7.         }),
    8.     ],
    9. };

    复制代码
  
  
• Vite
  
  
  
  • 使用 vite-plugin-purgecss：
    1. import purgeCSS from 'vite-plugin-purgecss';
    2. export default {
    3.     plugins: [purgeCSS()],
    4. };

    复制代码
  
  

4.3 按需加载样式库

• Bootstrap：仅引入所需模块：
  1. @import "bootstrap/scss/functions";
  2. @import "bootstrap/scss/variables";
  3. @import "bootstrap/scss/buttons";

  复制代码
• Tailwind CSS：内置 Purge 功能：
  1. module.exports = {
  2.     purge: ['./src/**/*.{html,js}'],
  3. };

  复制代码

4.4 内联关键 CSS

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

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

复制代码

4.5 动态加载 CSS

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

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

复制代码

---

5. 示例：优化前后对比

优化前

1. /* style.css */
2. body {
3.     margin: 0;
4. }
5. /* 未使用的规则 */
6. .unused-class {
7.     color: red;
8.     padding: 10px;
9. }
10. .hero {
11.     font-size: 24px;
12. }

复制代码

• 文件巨细：约 150 字节。
  
• 未使用字节：约 50%。
  

优化后

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

复制代码

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

效果

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

---

6. 留意事项

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

---

7. 总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4