CSS 压缩器

什么是 CSS 压缩？

CSS 压缩是在不改变浏览器解释方式的前提下，移除样式表中不必要字符的过程。压缩器会剥离注释、空白、换行、多余分号和其他冗余字节，生成一个功能完全相同但体积显著更小的文件。典型的压缩后 CSS 比原始格式良好的源文件小 20–40%。

由于浏览器在压缩前后以完全相同的方式解析 CSS，视觉效果不会改变——只有文件体积和解析时间会改善。这使压缩成为一种零风险的优化，每个生产网站都应将其作为构建流程的一部分加以应用。

为什么要压缩 CSS？

压缩 CSS 为生产网站带来三大具体好处。首先，更小的文件在网络中下载更快，这在移动连接和有限流量套餐的用户中尤为重要。其次，浏览器能更快地解析样式表，缩短页面可渲染前的等待时间。第三，压缩后的文件与 gzip 和 Brotli 配合得更好，在传输层进一步放大节省效果。

对于拥有多个大型样式表的网站，综合节省可能相当可观——每次页面加载可减少数十甚至数百 KB。这有助于改善 Core Web Vitals 中的最大内容绘制（LCP）和首次内容绘制（FCP）等指标，搜索引擎将其作为排名信号。

压缩过程中会移除什么？

一个完善的 CSS 压缩器在保留样式表行为的同时，会移除几类无功能内容：

• 注释——/* ... */ 块会被完全剥离，因为它们对渲染没有影响。
• 空白——开头、结尾以及多个连续空格会被折叠或移除。
• 换行——换行符和制表符会被移除，将规则合并到更少的行上。
• 多余分号——闭合大括号前的最后一个分号是不必要的，会被移除。
• 零值的单位——0px、0em 等会简化为 0。
• 冗余分隔符——{、}、: 和 ; 周围的空格会被移除。

本转换器应用了这些转换的安全集合。它不会激进地重写选择器或属性值，因此输出易于验证和调试。

何时压缩 CSS

压缩应放在构建流水线的最后，应用于发布到生产的文件。典型工作流是：开发时编写整洁、注释充分的 CSS，然后在部署步骤中作为一部分运行压缩器。常见的压缩时机包括：

• 生产构建。在发布前通过 Webpack、Vite、Rollup 或其他打包器自动运行压缩。
• 一次性快速优化。将手写样式表粘贴到本工具，为静态网站或邮件模板获取更小的副本。
• 审计第三方 CSS。压缩以未压缩形式提供的供应商样式表，以减小其体积。
• 邮件和嵌入模板。HTML 邮件中的内联 CSS 受益于压缩以保持在体积限制之下。

请始终将原始可读样式表作为真相来源——压缩后的版本是生成的产物，不应手工编辑。

压缩与传输压缩

CSS 压缩与 HTTP 压缩（gzip 或 Brotli）是互补的，而非可互换的。压缩从源文本中移除冗余字符，而传输压缩以更高效的方式编码传输的字节。两者结合可获得最小的传输体积：先压缩，再在响应上启用服务器端压缩。

即使在 gzip 之后，压缩文件通常也比未压缩文件小，因为压缩移除了传输压缩无法完全消除的模式（如注释和结构性空白）。为获得最佳效果，请在构建工具中启用压缩，并在 Web 服务器或 CDN 上启用 gzip/Brotli。