优化 Web 性能：压缩 CSS 文件（Unminified CSS）

在 Web 开发中，CSS 文件的大小直接影响页面加载速度和用户体验。Google 的 Lighthouse 工具在性能审计中特别关注"未压缩的 CSS 文件"（Unminified CSS），指出未经过压缩的样式表会增加不必要的字节，拖慢页面渲染。本文将基于 Chrome 开发者文档，深入探讨未压缩 CSS 的问题、影响及优化方法，助你在2025年的 Web 项目中提升性能。

1. 什么是未压缩的 CSS？

1.1 定义

未压缩的 CSS（Unminified CSS）是指包含空格、换行、注释和未优化的冗长代码的样式表文件。这些额外字符虽然对开发者阅读和调试有益，但在生产环境中是多余的，会增加文件体积。

1.2 未压缩 CSS 的特征

多余的空白：如缩进和换行。
注释：如 /* 这是一段注释 */。
冗长写法 ：如 margin-left 未简化为 margin。

1.3 Lighthouse 的关注点

Lighthouse 检查外部 CSS 文件，计算压缩后可节省的字节数，并将其列为性能优化的"机会"。

2. 未压缩 CSS 的影响

2.1 文件体积增加

未压缩的 CSS 文件可能比压缩版本大数倍。例如，一个 100KB 的未压缩文件可能压缩后仅剩 20KB。

2.2 加载时间延长

更大的文件需要更多下载时间，尤其在低速网络（如 3G）下，延迟"首次内容绘制"（FCP）和"可交互时间"（TTI）。

2.3 性能得分下降

Lighthouse 的性能评分会因未压缩资源而降低，直接影响用户体验和 SEO。

3. 如何识别未压缩的 CSS？

3.1 使用 Lighthouse

打开 Chrome 开发者工具（F12）。
切换到"Lighthouse"选项卡。
选择"性能"类别，生成报告。
查看"机会"下的"压缩 CSS 文件"（Minify CSS），列出未压缩文件及其潜在节省字节。

3.2 手动检查

打开 CSS 文件，查看是否有大量空格、注释或冗长代码。
在开发者工具的"网络"面板中，比较文件大小与实际内容。

4. 优化未压缩 CSS 的策略

4.1 手动压缩

使用在线工具（如 CSS Minifier）或命令行工具（如 UglifyCSS）压缩 CSS：

bash 复制代码

uglifycss style.css > style.min.css

删除空格、注释，缩短属性名。

4.2 使用构建工具

现代构建工具可自动压缩 CSS：

Webpack

配置 css-minimizer-webpack-plugin：

javascript 复制代码

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [new CssMinimizerPlugin()],
    },
};

Vite

默认内置压缩，无需额外配置：

javascript 复制代码

export default {
    build: {
        minify: 'esbuild', // 或 'terser'
    },
};

4.3 删除未使用 CSS

结合工具（如 PurgeCSS）移除未使用的样式：

javascript 复制代码

const purgecss = require('purgecss');
const result = await new PurgeCSS().purge({
    content: ['*.html'],
    css: ['style.css'],
});

减少文件体积，提升加载效率。

4.4 内联关键 CSS

将首屏所需的小部分 CSS 内联到 <style> 标签，避免外部文件加载：

html 复制代码

<style>
    body { margin: 0; font-family: Arial; }
</style>

4.5 CDN 和 Gzip

CDN：部署压缩后的 CSS 到内容分发网络。
Gzip ：启用服务器压缩，进一步减少传输大小：
nginx 复制代码
```
gzip on;
gzip_types text/css;
```

5. 示例：优化前后对比

优化前

css 复制代码

/* style.css */
/* 这是一个示例样式 */
body {
    margin-left: 0px;
    padding-top: 10px;
    font-family: Arial, sans-serif;
}

文件大小：约 150 字节。

优化后

css 复制代码

/* style.min.css */
body{margin:0;padding-top:10px;font-family:Arial,sans-serif}

文件大小：约 50 字节。
节省约 66% 的字节。

效果

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

6. 注意事项

调试版本：保留未压缩版本用于开发。
兼容性：确保压缩后代码功能不受影响。
自动化：将压缩过程集成到构建流程，避免手动操作。

7. 总结

未压缩的 CSS 是 Web 性能优化的常见问题，通过压缩和移除冗余代码，可以显著减少文件大小，提升加载速度。Lighthouse 的审计为我们提供了优化方向，而本文介绍的策略（如构建工具压缩、PurgeCSS、Gzip）则是实践指南。