Обе эти программы вы используете по отношению к ресурсам на вашем веб-сайте (таким как .css files и .js files). Обе эти программы уменьшают размер файла, делая процесс передачи между сервером и браузером более эффективным. Так как, это улучшает производительность. Интернет – это скоростная основа всемирной паутины и сжатый размер файла помогает этому.
Но эти два понятия совершенно разнятся. Если вы еще не знали об этом, эту разницу стоит понимать.
Минификация удаляет пробелы, комментарии, ненужные запятые, уменьшает длину шестигранного кода…
… и тому подобное. Файл остается с совершенно правильным кодом. Вам бы не хотелось пытаться прочитать его или работать с ним, но и, тем не менее, он не нарушает никаких правил. Браузер может прочитать его и использовать, как будто это исходный файл.
Минификация создает новый файл, который вы в конечном счете используете. Например, вы создаете документ style.css, с которым вы работаете. Затем вы можете уменьшить его в style.min.css.
Gzip-сжатие находит все повторяющиеся строки и заменяет их указателями на первом образце этой строки.
Юлия Эванс создала замечательный способ для понимания этой системы (см ее статью и видео). Взгляните на первый абзац стиха:
Once upon a midnight dreary, while I {pon} dered weak an {d wea}{ry,}
Over many{ a }quaint{ and }curious volume of forgotten lore,
W{hile I }nodded, n{ear}ly napping, su{dde}n{ly }th{ere} ca{me }a t{apping,}
As{ of }so{me o}ne gent{ly }r{apping, }{rapping} at my chamb{er }door.
‘Tis{ some }visitor,’{ I }mu{tte}r{ed, }t{apping at my chamber door} –
O{nly th}is,{ and }no{thi}{ng }m{ore}.
Текст в фигурных скобках был определен Gzip, как повторяющийся. Таким образом, они будут заменены указателями, которые занимают меньше места, чем текст сам по себе.
Gzip может быть невероятно эффективен при сжатии размера файла, особенно с кодом, так как код может повторяться множество раз. Представьте себе, как много образцов <div есть в HTML файле или { в файле CSS.
Вы можете создать сжатую версию файла (т.е. style.css.zip), но вы вряд ли когда-либо делали это, и браузер не знает, что с ним делать.
В Интернете, gzip-сжатие осуществляется непосредственно вашим сервером. Это делается в настройках сервера. После того, как вы настроите его один раз, gzipping работает автоматически, и не нужно делать никакой текущей работы. Сервер сжимает файл и отправляет его по сети. Браузер получает файл и распаковывает его, прежде чем использовать. Я никогда не слышал, чтобы кто-нибудь упомянул о накладных расходах архивирования и распаковки, так что я просто не принимаю это в расчет, да и выгоды намного перевешивают издержки.
Вот как можно включить его на серверах Apache, где он использует модуль mod_deflate. И H5BP предлагает серверные конфигурации для всех популярных серверов, которые включают gzip-сжатие.
Пример
Мы будем использовать файл CSS из Bootstrap, так как это, пример всеобщего достояния.
1compressing
Вы будете экономить около 17% минифицируя CSS, 85% используя gzip-сжатие или 86%, если вы будете пользоваться обоими.
Вот идеальная ситуация при проверке, когда все работает, от DevTools:
2 ideal
Gzip-сжатие гораздо более эффективно. А использование обоих – это самый идеальный вариант.
Gzipping уменьшает размер файла примерно в пять раз, столько же сколько минификация. Но, вы получите небольшое преимущество и от минификации также, поскольку он требует мало дополнительных усилий на этапе сборки, вы могли бы также выбрать и его.
Существуют также некоторые свидетельства того, что браузеры могут быстрее читать и анализировать уменьшенный файл:
Как и ожидалось, минификация помогает разобрать и загрузить матириал в дополнение ко времени передачи через сеть. Это, вероятно, из-за отсутствия комментриев и лишних пробелов.
Microsoft также начинает оптимизировать свои анализаторы для него:
Таким образом, в Windows 10 и Microsoft Edge, мы добавили новые быстрые пути, улучшили встраивание и оптимизировали некоторые мотоды в компиляторе JIT Chakra, чтобы гарантировать, что уменьшенный код работает так же быстро, если не быстрее, чем не-уменьшенные версии кода. С учетом этих изменений, производительность отдельных моделей кода уменьшается с помощью UglifyJS, который мы испытали, улучшили на 20-50%.
Кэширование ресурсов также связано с этой темой, так как нет ничего быстрее браузера, которому вообще не приходится требовать ресурсов! Существует много информации об этом в Интернете (или в книгах), но мы можем просто сделать пост об этом в ближайшее время с добавлением некоторых хитростей.
