优化 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：
const { PurgeCSS } = require('purgecss');
const purgeCSSResult = await new PurgeCSS().purge({
content: ['*.html'], // HTML 文件
css: ['style.css'],// CSS 文件
});
[*]步调：
[*]指定 HTML 和 CSS 文件。
[*]分析内容，移除未匹配的规则。
[*]输出优化后的 CSS。
4.2 构建工具集成
[*]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 }),
}),
],
};
[*]Vite
[*]使用 vite-plugin-purgecss：import purgeCSS from 'vite-plugin-purgecss';
export default {
plugins: ,
};
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 的审计为我们提供了优化方向，而本文先容的策略则是实践指南。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]