Gzip против minify

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

Я позвоню этому человеку X.

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

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

У меня нет метода тестирования, но я считаю, что 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-ld 88 Apr 30 09:17 expanded.js.gz -rwx------ 1 xxxxxxxx mkgroup-ld 81 Apr 30 09:18 minified.js.gz 

Вот еще одно испытание с использованием примера JS реального мира. Исходным файлом является «common.js». Исходный размер файла – 73134 байт. Minified, он достиг 26232 байта.

Исходный файл:

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

Мини-файл:

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

Исходный файл gzipped с опцией -9 (такая же версия, как указано выше):

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

Мини-файл gzipped с опцией -9 (такая же версия, как указано выше):

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

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

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

Оригинал: 28 781 байт
Мини-код: 22,242 байт
Gzipped: 6,969 байт
Min + Gzip: 5,990 байт

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

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

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

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

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

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

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

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

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

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

Ты прав.

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

 var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null; 

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

 var a = null; 

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

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

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

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

Вот результаты minify vs. 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-библиотеками.

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

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

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

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

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

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

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

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

Файлы Concat 2.5MB

 uglify({ mangle: false }) 

Миниатюрный без рубок: 929kb

 uglify({ mangle: true }) 

Миниатюрные и искалеченные: 617kb

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

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

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

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

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

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

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

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

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

это результаты, когда gziping два файла

 bytes File 45 min.txt 73 min.gz 72 normal.txt 81 normal.gz 

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

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

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

  • Node.js: сжатие Gzip?
  • API компрессии на iPhone
  • Действительно простое сжатие коротких строк
  • Эффективный алгоритм сжатия коротких текстовых строк
  • Как читать данные из zip-файла без необходимости разархивировать весь файл
  • Давайте будем гением компьютера.