Gzip против minify

Question

На днях у меня было несколько оживленное обсуждение минимизации 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}

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

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

Answer 1

Очень просто проверить. Я взял ваши 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

Оригинальный файл, сжатый с опцией -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

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

Answer 2

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

Оригинал: 28,781 байт
Сокращено: 22,242 байт
Gzipped: 6,969 байт
Мин. Gzip: 5,990 байт

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

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

Answer 3

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

minify + gzip сжимает больше, чем просто gzip

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

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

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

Рассуждение:

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

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

Answer 4

Ты прав.

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

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

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

var a = null;

Конечно, я бы сказал, что лучший подход в большинстве случаев это минимизировать ПЕРВЫЙ, а не Gzip, чем просто минимизировать или gzipping, хотя в зависимости от кода иногда просто минимизация или gzipping даст вам лучшие результаты, чем выполнение обоих. *

Answer 5

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

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

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

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

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

Answer 6

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

Answer 7

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

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

Concat Files 2,5 МБ

uglify({
    mangle: false
})

Minified без искажения: 929kb

uglify({
    mangle: true
})

Сокращенный и искалеченный: 617 КБ

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

Answer 8

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

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

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

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

Answer 9

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

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

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

Answer 10

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

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz