Softonic

CSS 压缩

步 1 / 3
下一个

压缩后的 CSS 文件加载速度明显快于美化版，而且这点差异会随每次页面加载叠加。这个压缩器去掉空白、注释和末尾分号，不改变层叠或任何规则的效果。输出永远是有效 CSS，浏览器对其解析结果与原文完全一致。

如何压缩 CSS

  1. 1

    粘贴 CSS

    任何 CSS：手写的、Sass 编译的、内联 style 块。

  2. 2

    压缩

    点击“Minify CSS”，一次性去掉注释、空白和末尾分号。

  3. 3

    查看节省量

    节省的字节数显示在压缩结果旁边。

  4. 4

    复制结果

    把压缩后的 CSS 粘进你的生产包，或保存为 `.min.css`。

压缩器做什么

转换（绝不改变行为）：

  • 去掉所有注释（包括 /*! 许可证块）。
  • 去掉不必要的空白（选择器之间、声明之间、花括号附近）。
  • 去掉闭花括号前的末尾分号。
  • 把多行规则折成一行。

仅此而已，所以输出行为与原文完全一致：每个选择器、属性和值都保持原样。

典型节省量

来源 原始大小 压缩后 节省
美化的手写 CSS 20 KB 12 KB 40%
Sass 编译，开发模式 45 KB 25 KB 44%
已压缩 + gzip 10 KB 10 KB 0%

在压缩之外，服务器的 gzip 还能再省 60-80%，因为 CSS 高度重复。两者叠加；都要做。

压缩不做的事

  • 去掉未使用的 CSS。那是 tree-shaking / PurgeCSS 的范畴，要分析你的 HTML 或组件。
  • 缩短十六进制颜色、折叠零单位或合并声明。那些激进转换是 cssnano、esbuild 或 Lightning CSS 的职责，不是本工具的。
  • 把重复选择器合并成一条。有风险，因为源码顺序影响层叠；少数压缩器会尝试，多数跳过。
  • 重命名类。那是 CSS-in-JS 或 CSS Modules，不是压缩。
  • 内联关键 CSS。那是另一个构建时步骤。

保留许可证注释

许多压缩器会保留以 /*! 开头的注释，用于许可证头：

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

本工具会去掉所有注释。如果你的 CSS 带有许可证头，压缩后请加回去，或使用带保留许可选项的构建工具，如 cssnano 或 esbuild。

Source maps

为了生产环境调试，构建工具会在压缩输出旁边生成一份 source map：

styles.min.css
styles.min.css.map

DevTools 能读取 map，在你审查元素时显示原始美化版的行号。本工具不生成 source map。

构建管道里的 CSS 压缩

  • Vite、Webpack、Parcel：在生产构建中自动处理。
  • PostCSS 加 cssnano：标准独立压缩器。
  • esbuild：也包含 CSS 压缩。
  • cssnano 预设：default 走安全转换，advanced 走激进（带一些取舍）。

这个工具适合一次性压缩、快速修整和理解压缩器到底做什么。生产工作流请用构建工具，让源码保持可读，只压缩输出。

压缩在何时可能破坏你的 CSS

少见但可能：

  • 空白敏感的选择器：.foo .bar vs .foo.bar，空格有意义。
  • 带空格的自定义属性值：--shadow: 0 2px 4px rgba(0,0,0,0.1)，rgba() 内部的逗号不能被去掉。
  • 未闭合的块注释：/* missing close 会吞掉它之后的所有东西。压缩器在格式不良的输入上可能失常。

修复方法：发布前对压缩输出跑一遍 lint/test。

常见问题

不会。正确压缩的 CSS 文件字节不同但语义相同。每个选择器、属性和值都产生相同的视觉结果。如果你看到渲染变化，要么压缩器有 bug，要么你的输入里有空白敏感的语法。

会，当你点击“Minify CSS”时。你粘贴的 CSS 会被发送到我们的服务器进行压缩，结果再返回页面。它不会存入数据库，也不会被加入页面链接。

之后。压缩浏览器实际拿到的最终编译 CSS。Sass 输出本身就比较紧凑，但仍有可被压缩掉的空白和注释。

不多但实在，通常在 gzip 之外再省 5-15%。去掉空白和注释顺带让 gzip 模式更紧密。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本