Gzip против минификации
https://stackoverflow.com/questions/807119
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
На днях у меня была довольно оживленная дискуссия о минимизации Javascript и CSS по сравнению с кем-то, кто предпочитает использовать Gzip.
Я назову этого человека X.
X сказал, что Gzip уже минимизирует код, поскольку сжимает ваши файлы.
Я не согласен.Зип - это без потерь метод сжатия файла.Без потерь означает, что оригинал должен быть полностью восстановлен, то есть информация должна быть сохранена, чтобы можно было восстановить пробелы, ненужные символы, закомментированный код и все остальное.Это занимает больше места, поскольку необходимо сжать больше.
У меня нет метода тестирования, но я считаю, что 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.
Оригинал: 28,781 байты
Минимизировано: 22,242 байты
Заархивировано: 6,969 байты
Мин+Gzip: 5,990 байты
Мое личное мнение — сначала использовать Gzipping, поскольку это, очевидно, имеет самое большое значение.Что касается минификации, это зависит от того, как вы работаете.Вам придется сохранить исходный файл CSS, чтобы вносить изменения в дальнейшем.Если вас не беспокоит минимизация после каждого изменения, сделайте это.
(Примечание:есть и другие решения, такие как запуск его через минификатор «по требованию» при обслуживании файла и его кэширование в файловой системе.)
Будьте осторожны при тестировании этого:эти два фрагмента CSS тривиально малы, поэтому они не получают выгоды от сжатия GZIP - добавление одного лишь небольшого заголовка GZIP приведет к потере достигнутых результатов.На самом деле у вас не будет такого маленького CSS-файла, и вам не придется беспокоиться о его сжатии.
minify+gzip сжимает не только gzip
Ответ на исходный вопрос: да, minify + gzip обеспечит значительно большее сжатие, чем просто gzip.Это справедливо для любого нетривиального примера (т. е. любого полезного кода JS или CSS размером более нескольких сотен байт).
Примеры этого в действительности: возьмите исходный код Jquery который доступен как в минимизированном, так и в несжатом виде, сожмите их оба с помощью gzip и посмотрите.
Стоит отметить, что Javascript выигрывает от минимизации гораздо больше, чем от хорошо оптимизированного CSS, но польза все же есть.
Аргументация:
GZIP-сжатие происходит без потерь.Это означает, что он должен хранить весь текст, включая точные пробелы, комментарии, длинные имена переменных и т. д., чтобы их можно было идеально воспроизвести позже.С другой стороны, минификация приводит к потерям.Если вы минимизируете свой код, вы удалите большую часть этой информации из своего кода, оставив меньше того, что GZIP должен сохранить.
- Минификация удаляет ненужные пробелы, оставляя пробелы только там, где это необходимо по синтаксическим причинам.
- Минификация удаляет комментарии.
- Минимизация кода может заменить имена идентификаторов более короткими именами, при этом не будет побочных эффектов.
- Минимизация кода может сделать тривиальную «оптимизацию компилятора» кода, которая возможна только путем фактического анализа кода.
- Минимизация CSS может устранить избыточные правила или объединить правила, имеющие один и тот же селектор.
Ты прав.
Минификация — это не то же самое, что сжатие (в этом случае они бы назывались одинаково).Например, это не то же самое, что сжать это:
var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;
Затем минимизируйте, чтобы в итоге получилось что-то вроде:
var a = null;
Конечно, я бы сказал, что в большинстве случаев лучший подход - это минимизировать ПЕРВЫМ, а затем Gzip, а не просто минимизировать или gzip, хотя в зависимости от кода иногда просто минимизация или gzip дает лучшие результаты, чем оба варианта.
Существует порог, при котором gzip-кодирование является предпочтительным.Общее правило таково:чем больше файл, тем лучше сжатие и gzip, без сомнения, выиграют.Конечно, вы можете сначала минимизировать, а потом gzip.
Но если мы говорим о gzip vs.минимизировать небольшой фрагмент текста длиной не более 100 байт, «объективное» сравнение ненадежно и даже бессмысленно — если только мы не получим базовый текст для установления стандартных средств сравнительного анализа, таких как Lorem Ipsum, но написанный на Javascript или CSS.
Итак, позвольте мне предложить протестировать последние версии jQuery и MooTools (несжатые версии), используя мой Минимизировать без жира (PHP) код (просто удаление пробелов и комментариев, без сокращения переменных, без кодировки BaseX)
Вот результаты minify vs.gzip (при консервативном сжатии уровня 5) по сравнению с.минимизировать+сжать:
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-библиотек.
Как видите, минимизация+gzip дает лучшее сжатие. в больших файлах.Минимизация кода имеет свои преимущества, но основным фактором является количество пробелов и комментариев в исходном коде.В этом случае jQuery имеет больше возможностей, поэтому обеспечивает лучшую минификацию (гораздо больше пробелов во встроенной документации).Сила сжатия Gzip заключается в том, сколько повторений содержится в содержимом.Так что речь идет не о minify vs.gzip.Они делают вещи по-другому.И вы получите лучшее из обоих миров, используя оба.
Почему бы не использовать оба?
Это легко проверить:просто поместите текст вашего CSS в текстовые файлы и сожмите файлы с помощью архиватора, такого как gzip в Linux.
Я только что сделал это, и случается, что для первого CSS размер составляет 184 байта, а для второго - 162 байта.
Итак, вы правы, пробелы имеют значение даже для файлов, заархивированных gzip, но, как видно из этого небольшого теста, для очень маленьких файлов размер сжатого файла может быть больше, чем размер исходного файла.
Это связано с очень небольшим размером вашего примера: для файлов большего размера при сжатии gzip вы получите файлы меньшего размера.
Я не видел, чтобы кто-нибудь упоминал Манглинга, поэтому публикую свои результаты по этому поводу.
Вот несколько цифр, которые я получил, используя UflifyJS для минификации и Gzip.У меня было около 20 файлов, которые я объединил вместе размером около 2,5 МБ с комментариями и всем остальным.
Конкат-файлы 2,5 МБ
uglify({
mangle: false
})
Минимизировано без искажения:929кб
uglify({
mangle: true
})
Минимизировано и искажено:617кб
Теперь, если я возьму эти файлы и заархивирую их, я получу 239 КБ и 190 КБ соответственно.
Есть очень простой способ проверить это:Создайте файл, состоящий только из пробелов, и еще один действительно пустой файл.Затем Gzip оба и сравните их размеры.Файл с пробелами, конечно, будет больше.
Конечно, «человеческое» сжатие с потерями, которое сохраняет макет или некоторые другие важные вещи и удаляет весь ненужный мусор (пробелы, комментарии, избыточные вещи и т. д.), будет лучше, чем сжатие 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 будет содержать точный объем переданных данных, сравните их, и вы получите «эмпирическое» доказательство.
