CSS 压缩：几秒内将样式表大小削减 60%

为什么你的 CSS 需要减肥

如果你曾经打开 DevTools，看着一个 200KB 的样式表在任何内容渲染之前加载，你就知道那种痛苦。CSS 是渲染阻塞资源——浏览器在解析完样式表之前不会绘制哪怕一个像素。每个额外字节都很重要。

我见过生产站点发布充满开发者注释、调试规则和格式化空白的 CSS 文件。我参与过的一个项目，仅靠压缩就将最大的样式表从 180KB 削减到 95KB——不需要其他任何更改。这就是让性能团队满意的那种快速胜利。

CSS 压缩实际做了什么

让我们具体说明。当你通过压缩器运行 CSS 时，它会做几件事：

1. 删除注释

/* 整个块消失 */
/* TODO: 之后修复悬停状态 */
.button {
  color: blue;
}

变成：

.button{color:blue}

2. 删除空白和换行符

所有缩进、冒号后的空格、花括号周围的空格——消失。浏览器不需要它们。

3. 删除最后的分号

在 CSS 中，块中最后一个声明技术上不需要分号。压缩器会删除它：

.box{margin:0;padding:10px;color:#333}

而不是 color:#333;——每个规则节省一个字节。

4. 在可能的情况下缩短值

一些高级压缩器走得更远：

• #ffffff 变成 #fff
• margin: 0px 变成 margin:0
• font-weight: bold 变成 font-weight:700

实际影响

让我分享一些我在不同项目中看到的数字：

原始大小	压缩后	节省	项目类型
45 KB	28 KB	38%	小型营销站点
180 KB	95 KB	47%	电商平台
320 KB	210 KB	34%	企业仪表板
15 KB	9 KB	40%	落地页

当你考虑 Gzip 压缩时，这些节省会进一步增加。一个 95KB 的压缩文件可能在传输时压缩到 18KB。对于网速慢的用户来说，这是巨大的差异。

如何压缩 CSS：你的选择

选项 1：在线工具（快速简便）

对于一次性压缩或快速检查，在线工具非常好用。我们的 CSS 压缩工具 直接在浏览器中处理——粘贴你的 CSS，点击压缩，复制结果。没有数据离开你的机器。

这种方法适用于：

• 你在处理静态 CSS 文件
• 你想快速检查文件能减少多少
• 你在原型设计，还没有搭建构建管道

选项 2：构建工具集成（生产推荐）

对于生产工作流，你需要将压缩集成到构建流程中：

Vite（在生产中自动处理）：

// vite.config.js — CSS 压缩默认启用
export default defineConfig({
  build: {
    cssMinify: true // 默认值
  }
})

PostCSS 与 cssnano：

npm install cssnano --save-dev

// postcss.config.js
module.exports = {
  plugins: [require('cssnano')({ preset: 'default' })]
}

webpack 与 css-minimizer-webpack-plugin：

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

选项 3：CLI 工具

如果你偏好命令行工具：

# 使用 clean-css-cli
npx clean-css-cli -o output.min.css input.css

# 使用 csso
npx csso input.css --output output.min.css

超越基础压缩

压缩只是起点。以下是更多缩减 CSS 的技术：

删除未使用的 CSS

这通常比压缩本身影响更大。PurgeCSS 等工具分析你的 HTML 和 JavaScript 来删除未使用的 CSS 规则：

npx purgecss --css style.css --content index.html --output dist/

我见过 PurgeCSS 删除 Tailwind CSS 文件的 80-90%。如果你使用工具框架，这一步是必不可少的。

明智地使用 CSS 自定义属性

CSS 自定义属性（变量）根据使用方式可以增加或减少文件大小：

/* 不要重复值 */
.card { border: 1px solid #e2e8f0; }
.modal { border: 1px solid #e2e8f0; }
.dropdown { border: 1px solid #e2e8f0; }

/* 使用变量——当有很多重复时节省字节 */
:root { --border: 1px solid #e2e8f0; }
.card { border: var(--border); }
.modal { border: var(--border); }
.dropdown { border: var(--border); }

分离关键 CSS 和非关键 CSS

将关键（首屏）CSS 内联到 HTML 中，延迟加载其余部分：

<style>/* 关键 CSS 内联在此 */</style>
<link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'">

这种技术可以显著改善你的 Largest Contentful Paint（LCP）得分。

常见压缩错误

1. 压缩已经压缩过的代码

对已压缩的 CSS 再次运行压缩器无害但毫无意义。一些 CI 管道意外地进行了双重压缩。不会破坏任何东西，但浪费了构建时间。

2. 不保留源文件

始终在版本控制中保留原始的可读 CSS。只在构建步骤中压缩。永远不要将压缩文件作为你的真实来源提交。

3. 忽视 Source Maps

为了调试生产问题，在压缩的 CSS 旁边生成 Source Maps：

npx csso input.css --output output.min.css --source-map output.min.css.map

Source Maps 让你在向用户提供压缩代码的同时，在 DevTools 中调试原始源代码。

4. 忘记字体和图像

CSS 文件大小只是故事的一部分。背景图像的数据 URI、通过 @font-face 嵌入的字体——这些会使 CSS 膨胀。考虑：

• 将数据 URI 移动到单独的图像文件
• 使用 font-display: swap 避免渲染阻塞
• 对字体进行子集化，只包含需要的字符

CSS 压缩与 Core Web Vitals

Google 的 Core Web Vitals 与 CSS 性能直接相关：

First Contentful Paint（FCP）：CSS 是渲染阻塞的。更小的 CSS = 更快的 FCP。

Largest Contentful Paint（LCP）：如果你的主图区域依赖 CSS 布局，压缩有助于 LCP。

Cumulative Layout Shift（CLS）：更快的 CSS 加载意味着减少因延迟加载样式而导致的布局偏移。

我参与过的一个站点，仅通过压缩和拆分 CSS，FCP 改善了 300ms。这使他们在 PageSpeed Insights 上从"需要改进"提升到了"良好"。

什么时候不应该压缩

有几个不适合压缩的边缘情况：

• 开发环境：保持 CSS 可读以便调试
• 设计系统文档：其中 CSS 本身就是内容
• 邮件模板：某些邮件客户端在高度压缩的 CSS 下行为异常
• 非常小的文件：500 字节的文件删除 50 字节收益不大

总结

CSS 压缩是每个生产站点都应该实现的简单快速胜利。努力与影响的比率非常出色：

1. 即时效果 ——通常文件大小减少 20-50%
2. 零风险 ——你的网站外观和功能完全相同
3. 易于自动化 ——大多数构建工具用一行配置即可处理
4. 与压缩叠加 ——与 Gzip/Brotli 结合，节省成倍增加

从我们的 CSS 压缩工具 开始，看看你当前的 CSS 能减少多少。然后在构建管道中设置自动压缩。你的用户——以及他们的流量套餐——会感谢你的。