有真正聪明的CSS压缩机吗？

我测试了一些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字节？

当你在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;
}

相关文章