Gzip与缩小

前几天，我与那些喜欢使用Gzip的人进行了一次热烈的讨论，讨论如何缩减Javascript和CSS。

我称这个人为X。

X表示Gzip已经压缩了所有代码，因为它压缩了文件。

我不同意。拉链无损缩小文件大小方法。无损意味着必须完美还原原始文档，这意味着必须存储信息才能还原空格，不需要的字符，注释的代码以及所有其他内容。因为必须压缩更多空间，所以占用了更多空间。

我没有测试方法，但是我相信这段代码的Gzip：

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

仍将大于此代码的Gzip：

.a1{body:background-color:#FFF;padding:40px}

有谁能证明对与错。
而且请不要说“是对的，因为那是我一直使用的”。

我在这里要求科学证明。

测试非常简单。我拿了您的js，将它们放在不同的文件中，然后在它们上运行gzip -9。这是结果。这是在运行Cygwin和gzip 1.3.12的WinXP计算机上完成的。

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

这是使用真实JS示例的进一步测试。源文件为“ common.js”。原始文件大小为73134字节。缩小后为26232字节。

原始文件：

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

缩小文件：

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

用-9选项压缩的原始文件（与上述版本相同）：

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

用-9选项压缩的压缩文件（与上述版本相同）：

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

如您所见，各种方法之间有一定的区别。最好的选择是将它们缩小并gzip。

这是我前一段时间使用我网站上的“真实” CSS文件进行测试的结果。CSS优化器用于缩小。Ubuntu随附的标准Linux存档应用程序用于Gzipping。

原始：28,781字节
最小：22,242字节
压缩：6,969字节
最小+ Gzip：5,990字节

我个人的观点是首先选择Gzipping，因为那显然是最大的不同。至于缩小，这取决于您的工作方式。您必须保留原始CSS文件才能进行进一步的编辑。如果每次更改后都没有麻烦您将其最小化，请继续尝试。

（注意：还有其他解决方案，例如在为文件提供服务时通过minifier的“按需”运行它，并将其缓存在文件系统中。）

测试时要当心：这两个CSS片段很小，因此它们无法从GZIP压缩中受益-仅添加GZIP的较小的页眉和页脚（大约20字节的开销）将失去所获得的收益。实际上，您不会拥有这么小的CSS文件，并且不必担心对其进行压缩。

minify + gzip压缩的不仅仅是gzip

原始问题的答案是，是的，minify + gzip将获得比gzip更大的压缩率。对于任何不平凡的示例（例如，超过数百字节的任何有用的JS或CSS代码），都是如此。

有关有效的示例，请获取可压缩且未压缩的Jquery源代码，并使用gzip对其进行压缩并进行查看。

值得一提的是，与优化的CSS相比，JavaScript的缩小带来的好处要大得多，但仍然有好处。

推理：

GZIP压缩是无损的。这意味着它必须存储所有文本，包括确切的空格，注释，长变量名等，以便以后可以完美地复制它们。另一方面，缩小是有损的。如果您缩减代码，那么您将从代码中删除许多此类信息，而剩下的GZIP则需要保留。

• 缩小会不必要地丢弃空格，仅出于语法原因在必要时留空格。
• 缩小删除评论。
• 代码缩编可以在没有副作用的情况下用较短的名称替换标识符名称。
• 代码压缩可能会对代码进行微不足道的“编译器优化”，这只有通过实际解析代码才能实现
• CSS最小化可以消除冗余规则或合并具有相同选择器的规则。

你是对的。

缩小与gzip压缩是不同的（如果是这种情况，它们将被称为相同）。例如，用gzip压缩它是不一样的：

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

比缩小最终得到类似：

var a = null;

当然，在大多数情况下，我会说最好的方法是先缩小Gzip，然后再缩小Gzip，而不只是缩小或gzipping，尽管有时取决于代码，有时缩小或gzipping比两者兼而有之。

gzip编码具有优势的阈值。一般规则是：文件越大，压缩和gzip越容易胜任。当然，您可以先缩小，然后再缩小gzip。

但是，如果我们谈论的是gzip vs.miniming在不超过100字节长的一小段文字上，那么“客观”的比较是不可靠的，甚至是毫无意义的-除非我们拿出基准文本来建立基准测试的标准方法，类似于Lorem Ipsum类型，但使用Javascript或CSS编写。

因此，让我建议使用我的无脂肪Minify（PHP）代码对jQuery和MooTools的最新版本（未压缩版本）进行基准测试（只是简单地去除空格和注释，不缩短变量，不进行baseX编码）

这是minify vs. gzip（保守的5级压缩）vs. minify + gzip的结果：

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

在任何人都无法接受之前，这不是JS库的战斗。

如您所见，minification + gzipping使您可以更好地压缩大文件。压缩代码具有其优势，但是主要因素是原始代码中存在多少空白和注释。在这种情况下，jQuery有更多功能，因此可以提供更好的缩小效果（内联文档中有更多的空格）。Gzip压缩的优势在于内容中有多少重复。因此，这与缩小与gzip无关。他们做事不同。同时使用两者，您将获得两全其美的体验。

为什么不同时使用两者？

这很容易测试：只需将CSS的文本放入文本文件中，然后使用诸如Linux上的gzip之类的存档器压缩文件即可。

我刚刚完成了此操作，并且碰巧的是，对于第一个CSS，大小为184字节，对于第二个162字节。

因此，您是对的，即使对于压缩文件，空格也很重要，但是从这一小小的测试中可以看出，对于很小的文件，压缩文件的大小可能大于原始文件的大小。

这仅仅是由于示例的大小很小，对于较大的文件，gzip压缩将使您的文件更小。

我没有看到任何人提及Mangling，因此我将发布结果。

这是我使用UflifyJS进行缩小和Gzip绘制的一些图。我大约有20个文件，它们的大小约为2.5MB，包括注释和所有内容。

Concat文件2.5MB

uglify({
    mangle: false
})

缩小而无残缺：929kb

uglify({
    mangle: true
})

缩小并粉碎：617kb

现在，如果我将这些文件并gzip压缩，则分别将获得239kb和190kb。

有一个非常简单的测试方法：创建一个仅包含空格和另一个真正为空的文件。然后将两者压缩，然后比较它们的大小。带有空格的文件当然会更大。

当然，保留布局或某些其他重要内容并删除任何不需要的垃圾（空白，注释，多余的内容等）的“人为”有损压缩比无损gZip压缩要好。

例如，诸如标记或函数名称之类的东西很可能具有一定的长度来描述其含义。用一个字符长的名称替换它可以节省很多空间，并且无损压缩是不可能的。

顺便说一下，对于CSS，有CSS压缩器之类的工具可以为您完成有损工作。

但是，结合“有损优化”和无损压缩，您将获得最佳结果。

当然，您可以测试-将您的文件写入文件，然后使用zlib将其gzip压缩。您也可以尝试使用“ gzip”实用程序。

回到您的问题-源长度和压缩结果之间没有明确的关系。关键是“熵”（源中的每个元素有多大不同）。

因此，这取决于您的来源。例如，许多连续空间（例如，> 1000）可以压缩为与几个空间（例如，<10）相同的大小。

这是gzip两个文件时的结果

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

您是正确的，minify + gzip导致字节减少。虽然没有科学证据。

为什么没有测试方法？

在一个文件中最小化您的代码，在另一个文件中使其“未最小化”。上载到能够对输出进行gzip处理的Web服务器（例如，Apache的mod_deflate），安装用于firefox的Firebug扩展，清除缓存并访问这两个文件。Firebug的“ NET”选项卡将包含确切的数据传输量，将这些数据进行比较即可获得“经验”证明。