Gzip против minify

На днях у меня была довольно оживленная дискуссия о минимизации Javascript и CSS по сравнению с тем, кто предпочитает использовать Gzip.

Я назову этого человека X.

X сказал, что Gzip уже минимизирует код, поскольку он архивирует ваши файлы.

Я не согласен. Zip - это метод сжатия файлов без потерь . Без потерь означает, что оригинал должен быть полностью восстановлен, то есть информация должна быть сохранена, чтобы можно было восстановить пробелы, ненужные символы, закомментированный код и все остальное. Это занимает больше места, так как нужно сжать больше.

У меня нет метода тестирования, но я считаю, что Gzip этого кода:

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

Все равно будет больше, чем Gzip этого кода:

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

Есть ли кто-нибудь, кто может доказать, что это правильно или нет.
И, пожалуйста, не говорите: «Это правильно, потому что я всегда использовал это».

Я прошу здесь научных доказательств.

Очень просто проверить. Я взял ваши js, поместил их в разные файлы и запустил на них gzip -9. Вот результат. Это было сделано на машине WinXP с Cygwin и gzip 1.3.12.

-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

Исходный файл, сжатый с помощью gzip с параметром -9 (та же версия, что и выше):

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

Уменьшенный файл, сжатый с помощью gzip с параметром -9 (та же версия, что и выше):

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

Как видите, существует определенная разница между различными методами. Лучше всего как минимизировать, так и сжать их.

Вот результаты теста, который я провел некоторое время назад с использованием «реального» CSS-файла с моего веб-сайта. Оптимизатор CSS используется для минификации. Стандартное архивное приложение Linux, которое поставляется с Ubuntu, использовалось для Gzipping.

Оригинал: 28781 байтов
уменьшенная: 22242 байт сжат
GZIP: 6969 байт
Мин + Gzip: 5990 байтов

Мое личное мнение - в первую очередь использовать Gzipping, поскольку это, очевидно, имеет самое большое значение. Что касается минификации, это зависит от того, как вы работаете. Вам придется сохранить исходный файл CSS, чтобы вносить изменения в дальнейшем. Если вам не мешает минимизировать его после каждого изменения, сделайте это.

(Примечание: есть и другие решения, такие как запуск его через минификатор «по запросу» при обслуживании файла и его кеширование в файловой системе.)

Будьте осторожны при тестировании: эти два фрагмента CSS тривиально малы, поэтому они не получают выгоды от сжатия GZIP - только добавление небольшого заголовка и нижнего колонтитула GZIP (около 20 байт накладных расходов) потеряет достигнутый выигрыш. На самом деле у вас не было бы такого маленького файла CSS, и вы бы беспокоились о его сжатии.

minify + gzip сжимает не только gzip

Ответ на исходный вопрос: да, minify + gzip получит значительно большее сжатие, чем просто gzip. Это верно для любого нетривиального примера (т.е. любого полезного кода JS или CSS, размер которого превышает несколько сотен байтов).

В качестве примеров этого в действительности возьмите исходный код Jquery, который доступен в уменьшенном и несжатом виде, сожмите их с помощью gzip и посмотрите.

Стоит отметить, что Javascript намного больше выигрывает от минификации, чем от хорошо оптимизированного CSS, но преимущество все же есть.

Обоснование:

Сжатие GZIP без потерь. Это означает, что он должен хранить весь текст, включая точные пробелы, комментарии, длинные имена переменных и т. Д., Чтобы их можно было полностью воспроизвести позже. С другой стороны, минификация происходит с потерями. Если вы минимизируете свой код, вы удаляете большую часть этой информации из своего кода, оставляя меньше того, что нужно GZIP для сохранения.

• Минификация отбрасывает ненужные пробелы, оставляя пробелы только там, где это необходимо по синтаксическим причинам.
• Минификация удаляет комментарии.
• Минификация кода может заменить имена идентификаторов более короткими именами, при этом не будет побочных эффектов.
• Минификация кода может привести к тривиальной `` оптимизации компилятора '' кода, которая возможна только при фактическом анализе кода.
• Минификация CSS может устранить избыточные правила или объединить правила, которые имеют один и тот же селектор.

Ты прав.

Это не то же самое, что минимизировать, чем gzip (в этом случае они будут называться одинаково). Например, это не одно и то же:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Затем минимизируйте, чтобы получить что-то вроде:

var a = null;

Конечно, я бы сказал, что в большинстве случаев лучший подход - это сначала минимизировать, а затем Gzip, а не просто минимизировать или сжать сжатие, хотя в зависимости от кода иногда просто минимизация или сжатие дает лучшие результаты, чем оба.

Существует порог, при котором использование gzip-кодирования выгодно. Общее правило: чем больше размер файла, тем лучше сжатие и gzip. Конечно, вы можете сначала минимизировать, а затем сжать.

Но если мы говорим о gzip и minify для небольшого фрагмента текста длиной не более 100 байт, «объективное» сравнение ненадежно, даже бессмысленно - если мы не выйдем с базовым текстом для установления стандартных средств тестирования, как тип Lorem Ipsum, но написанный на Javascript или CSS.

Итак, позвольте мне предложить протестировать последние версии jQuery и MooTools (несжатые версии) с помощью моего Fat-Free Minify. код (PHP) (просто пробелы и комментарии, без сокращения переменных, без кодирования baseX)

Вот результаты minify против gzip (при консервативном сжатии пятого уровня) против 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.

Как видите, минимизация + сжатие дает лучшее сжатие для больших файлов . Уменьшение кода имеет свои преимущества, но основным фактором является количество пробелов и комментариев в исходном коде. В этом случае у jQuery больше, поэтому он дает лучшую минификацию (намного больше пробелов во встроенной документации). Сила сжатия Gzip заключается в том, сколько повторений в контенте. Так что дело не в minify и gzip. Они поступают иначе. И вы получите лучшее из обоих миров, используя оба.

Почему бы не использовать оба?

Это легко проверить: просто поместите текст вашего CSS в текстовые файлы и сожмите файлы с помощью архиватора, такого как gzip в Linux.

Я только что это сделал, и случается, что для первого CSS размер составляет 184 байта, а для второго 162 байта.

Итак, вы правы, пробелы имеют значение даже для файлов, сжатых с помощью gzip, но, как видно из этого небольшого теста, для действительно маленьких файлов размер сжатого файла может быть больше, чем размер исходного файла.

Это просто из-за очень маленького размера вашего примера, для больших файлов gzipping даст вам меньшие файлы.

Я не видел, чтобы кто-нибудь упоминал Mangling, поэтому я публикую свои результаты по этому поводу.

Вот некоторые цифры, которые я придумал, используя UflifyJS для минификации и Gzip. У меня было около 20 файлов, которые я объединил вместе размером около 2,5 МБ с комментариями и всем остальным.

Файлы Concat 2,5 МБ

uglify({
    mangle: false
})

Минифицировано без искажений: 929 КБ

uglify({
    mangle: true
})

Минифицировано и искажено: 617 КБ

Теперь, если я возьму эти файлы и заархивирую их, я получу 239 КБ и 190 КБ соответственно.

Есть очень простой способ проверить это: создать файл, состоящий только из пробелов, и другой действительно пустой файл. Затем запустите оба файла и сравните их размеры. Файл с пробелами, конечно, будет больше.

Конечно, "человеческое" сжатие с потерями, которое сохраняет макет или некоторые другие важные вещи и удаляет ненужный мусор (пробелы, комментарии, избыточные вещи и т. Д.), Будет лучше, чем сжатие без потерь gZip.

Например, такие вещи, как метки или названия функций, скорее всего, будут иметь определенную длину для описания значения. Замена этого имени на один символ позволит сэкономить много места и невозможна при сжатии без потерь.

Кстати, для CSS есть такие инструменты, как CSS-компрессор, которые сделают работу с потерями за вас.

Однако наилучшие результаты вы получите при сочетании «оптимизации с потерями» и сжатия без потерь.

Конечно, вы можете протестировать - запишите его в файл и заархивируйте его с помощью zlib . Вы также можете попробовать с помощью служебной программы "gzip".

возвращаясь к вашему вопросу - нет определенной зависимости между длиной источника и сжатым результатом. Ключевым моментом является «энтропия» (насколько разные элементы в источнике).

так что это зависит от вашего источника. например, много непрерывных пробелов (например,> 1000) могут быть сжаты до того же размера, что и несколько (например, <10) пробелов.

это результат сжатия двух файлов

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Вы правы, minify + gzip дает меньше байтов. Но никаких научных доказательств.

Почему у вас нет метода тестирования?

Сократите код в одном файле и оставьте его «не минифицированным» в другом. Загрузите на веб-сервер, способный архивировать выходные данные (например, mod_deflate для Apache), установите расширение Firebug для firefox, очистите кеш и получите доступ к обоим файлам. Вкладка «NET» Firebug будет содержать точное количество переданных данных, сравните их, и у вас будет «эмпирическое» доказательство.