css - 真的有聪明的 CSS 压缩器吗？

Question

我测试了一些 CSS 压缩器，老实说，我很失望。也许我只是尝试了错误的？

起点是以下故意错误的 css 代码：

.a{
   font-size: 10px;
   padding: 0 6px;
   text-align: center;
}
.b{
   font-size: 11px;
   padding: 0 6px;
   text-align: center;
}

很明显，在两个类中声明 3 个属性中的 2 个是无稽之谈，并导致 185 个字节的代码。如果你手动写得更好，它看起来像

.a, .b{
   padding: 0 6px;
   text-align: center;
}
.a{
   font-size: 10px;
}
.b{
   font-size: 11px;
}

这有点小（149字节）甚至

.a, .b{
   padding: 0 6px;
   text-align: center;
   font-size: 10px;
}
.b{
   font-size: 11px;
}

这是 133 字节之前和

.a,.b{padding:0 6px;text-align:center;font-size:10px}.b{font-size:11px}

压缩后只有 71 个字节。这将是原始大小的 100/185*71 = 38.3%。

然而，所有压缩所做的是：

.a{font-size:10px;padding:0 6px;text-align:center}.b{font-size:11px;padding:0 6px;text-align:center}

这是 100 个字节。

当然，在理想情况下，您只需编写更好的 CSS 代码，但如果您编写较大的文件，这并不容易，如果您使用任何框架，这几乎是不可能的。

那么，是否有任何更好的工具可以为上述示例代码生成 71 个字节？

score 2 · Accepted Answer

通过在 Bargaineering 上对 .css 文件进行 gzip 压缩，其大小从 28.2K 降至 7.3K，节省了 74.1%。该文件的响应时间从 53 毫秒变为 39 毫秒，节省了 26.4%。

score 1 · Accepted Answer

压缩可能看起来微不足道，但您还期望它做什么？你可以想象的任何类型的 CSS 压缩器在修改代码之前只会带你走这么远。

毕竟 CSS不是一种编程语言。

score 0 · Accepted Answer

当您在 CSS 压缩后使用 gzip（如大多数性能指南所建议的那样）时，您会得到不同的结果，因为 CSS 压缩器的输出更好地可压缩。

CSS 压缩版在 gzip 之后是 85 字节，而你的在 gzip 之后是 89 字节。

因此，在 CSS 压缩后使用 gzip 时，工具中的代码会获胜。此外，结果更像是原始代码，由于过度优化破坏了您的 CSS，因此为错误留下的空间更少。

但是，您的 CSS 代码在 71 字节的解压缩版本中获胜。

您所做的优化有一个非常本地化的用例，其中选择器在 CSS 文件中彼此相邻。

一些显示问题的示例小提琴：

.a {
    height:50px;
    width:50px;
    background-color: yellow;
}

.b {
    background-color: red;
}

.c {
    background-color: yellow;
}

3 回答 3