CSS 压缩：为什么以及如何压缩你的样式表

CSS 文件是页面大小和渲染阻塞资源的重要因素。每一千字节的 CSS 都必须被下载、解析和应用，浏览器才能绘制页面。CSS 压缩是你所能做的最简单且最有效的优化之一，然而许多网站仍在生产环境中提供未压缩的样式表。

什么是 CSS 压缩？

CSS 压缩是在不改变 CSS 功能的情况下移除文件中不必要字符的过程。这包括去除空白、移除注释、消除不必要的分号、缩短颜色值和合并冗余声明。结果是浏览器可以更快下载和解析的更小文件。

例如，一个格式良好的 CSS 规则（带注释和充足空格）可能占用 200 字节。压缩后，同一规则可以减少到 80 字节，减少 60%。在整个样式表中，这些节省会显著累积。

为什么 CSS 压缩很重要

更快的页面加载时间

较小的 CSS 文件下载更快，尤其是在慢速移动连接上。CSS 大小减少 100KB 可以在 3G 连接上节省数百毫秒，这直接改善了用户体验并降低了跳出率。

提升解析性能

浏览器必须先解析整个 CSS 文件才能渲染任何内容。压缩后的 CSS 包含更少的字符需要标记化和解析，这减少了浏览器在 CSSOM 构建阶段花费的时间。这种改善在低功耗设备上尤为明显。

改善 Core Web Vitals

Google 的 Core Web Vitals 衡量用户体验，CSS 直接影响多个指标。大型渲染阻塞 CSS 文件会延迟首次内容绘制和最大内容绘制。压缩有助于改善这些分数，进而改善搜索排名。

降低带宽成本

对于高流量网站，每个字节都很重要。提供压缩的 CSS 减少带宽消耗，这意味着更低的 CDN 成本和托管费用。节省在数百万次页面浏览中累积。

压缩过程中移除什么

• 空白：仅用于可读性的空格、制表符、换行和缩进被完全移除。
• 注释：所有 CSS 注释，从单行注释到多行文档块，都会被去除。
• 不必要的分号：闭合花括号前的最后一个分号是可选的，会被移除。
• 零值单位：0px、0em 和 0% 等值被缩短为 0。
• 颜色缩短：十六进制颜色如 #ffffff 变为 #fff，#aabbcc 变为 #abc。
• 属性合并：在可能的情况下，简写属性替代多个单独声明。
• 重复规则：一些高级压缩器会移除重复的选择器和声明。

如何压缩 CSS

使用在线工具

压缩 CSS 最快的方法是使用在线工具。粘贴你的 CSS 代码，点击按钮，即可立即获得压缩版本。这非常适合一次性任务、小型项目或没有构建系统的情况。试试我们免费的 CSS 压缩工具，几秒钟内压缩你的样式表。

使用构建工具

对于生产工作流，将 CSS 压缩集成到构建过程中。常用选项包括：

• cssnano：一个 PostCSS 插件，执行高级优化，包括合并规则、移除未使用代码和简化 calc 表达式。它是 JavaScript 生态中最流行的 CSS 压缩器。
• clean-css：一个快速高效的 CSS 优化器，可处理复杂样式表。它提供 Node.js API 和命令行接口。
• lightningcss：一个基于 Rust 的 CSS 转换器和压缩器，比基于 JavaScript 的替代方案快得多。它还处理供应商前缀和语法降级。

使用打包器

现代打包器如 Vite、Webpack 和 Rollup 可以在生产构建期间自动压缩 CSS。Vite 在生产构建时默认包含 CSS 压缩。对于 Webpack，使用 CssMinimizerPlugin。这些工具作为构建管道的一部分透明地处理压缩。

压缩与服务器压缩

压缩和服务器压缩是互补的技术，而非替代方案。压缩通过移除不必要字符来减小源文件大小，而 Gzip 或 Brotli 压缩通过查找和编码重复模式进一步减小传输大小。

一个典型的 CSS 文件可能通过压缩减少 30%，然后通过 Gzip 压缩再减少 70%。同时使用两者可以向浏览器传递最小的文件。始终在压缩的同时启用服务器端压缩。

常见错误及避免方法

• 在生产环境中提供未压缩的 CSS
• 手动压缩 CSS 后忘记在更改后更新压缩版本
• 不使用 source map，导致生产问题难以调试
• 只压缩 CSS 而不在服务器上启用 Gzip 或 Brotli 压缩
• 压缩第三方 CSS 而不测试兼容性问题
• 直接编辑压缩文件而非维护源文件并重新构建

衡量效果

要验证压缩是否正常工作并提供预期的效果，使用浏览器开发者工具或在线性能测试服务测量前后对比。需要跟踪的关键指标包括 CSS 文件总大小、下载时间、CSS 解析时间以及对首次内容绘制和最大内容绘制分数的影响。