我测试了一些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;
}
