Gzip проти мініфікувати

Днями у мене була дещо жвава дискусія про мінімізацію 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

Оригінальний файл gzipped з опцією -9 (та ж версія, що і вище):

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

Мінімізований файл gzipped з опцією -9 (та ж версія, що і вище):

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

Як бачите, між різними методами існує певна різниця. Найкраще робити це як мінімізувати, так і gzip.

Ось результати тесту, який я робив деякий час назад, використовуючи CSS-файл "реального життя" з мого веб-сайту. Для мінімізації використовується CSS Optimiser . Для Gzipping використовувався стандартний архівний додаток для Linux, який постачається разом з Ubuntu.

Оригінал: 28,781 байт
Мінімізовано: 22,242 байтів
Gzipped: 6,969 байт
Min + Gzip: 5,990 байт

Моя особиста думка - спершу піти на Gzipping, адже це, очевидно, найбільше. Що стосується мінімізації, то це залежить від того, як ви працюєте. Вам потрібно буде зберегти оригінальний файл CSS, щоб внести зміни далі вниз. Якщо вам не заважає мінімізувати її після кожної зміни, тоді перейдіть до цього.

(Примітка. Є й інші рішення, наприклад, запустити його через мініатюрист "на вимогу" під час обслуговування файлу та кешувати його у файловій системі.)

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

minify + gzip стискає більше, ніж просто gzip

Відповідь на початкове запитання: так, мінімізація + gzip отримає значно більшу кількість стиснення, ніж просто gzip. Це справедливо для будь-якого нетривіального прикладу (тобто будь-якого корисного JS або CSS-коду, що становить більше декількох сотень байт).

Для приклад цього по суті, візьміть вихідний код Jquery, який доступний мінімізованим та нестисненим, стисніть їх обома gzip та погляньте.

Варто зазначити, що Javascript виграє набагато більше від мінімізації, ніж добре оптимізований CSS, але все ж є користь.

Обґрунтування:

Стиснення GZIP без втрат. Це означає, що він повинен зберігати весь текст, включаючи точний пробіл, коментарі, довгі імена змінних тощо, щоб вони могли бути ідеально відтворені пізніше. З іншого боку, мінімізація є втратною. Якщо ви мінімізуєте свій код, ви вилучаєте велику частину цієї інформації зі свого коду, залишаючи менше, ніж GZIP потрібно зберегти.

• Мінімізація відкидає зайві пробіли, залишаючи пробіли лише там, де це необхідно з синтаксичних причин.
• Мінімізація видаляє коментарі.
• Зміна коду може замінити імена ідентифікаторів на більш короткі імена, де не було б побічних ефектів.
• Зміна коду може зробити тривіальну «оптимізацію компілятора» до коду, яка можлива лише шляхом фактичного розбору коду
• Заміщення CSS може усунути зайві правила або об'єднати правила, які мають той самий селектор.

Ти маєш рацію.

Не мінімізувати ніж gzipping (вони б називались так само, якби це було). Наприклад, це не те саме, щоб gzip:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Чим мінімізувати, щоб закінчити щось подібне:

var a = null;

Звичайно, я б сказав, що найкращий підхід у більшості випадків - це мінімізувати ПЕРШИЙ та Gzip, ніж просто мінімізувати чи gzipping, хоча залежно від коду іноді просто мінімізація чи gzipping дасть кращі результати, ніж виконання обох.

Існує поріг, при якому gzip-кодування є вигідним. Загальне правило: чим більший файл, тим краще стискання та gzip переможуть руки вниз. Звичайно, ви можете спочатку мінімізувати, а потім gzip.

Але якщо ми говоримо про gzip vs. minify на невеликому фрагменті тексту довжиною не більше 100 байт, "об'єктивне" порівняння є недостовірним, навіть безглуздим - якщо ми не вийдемо з базовим текстом для встановлення стандартних засобів бенчмаркінгу, наприклад, тип Lorem Ipsum, але написаний у Javascript або CSS.

Тож дозвольте мені запропонувати орієнтувати останні версії jQuery та MooTools (нестиснені версії) за допомогою мого коду Fat-Free Minify (PHP) (просто просте видалення пробілів та коментарів, відсутність скорочення змінних, без кодування baseX)

Ось результати мінімізації проти 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 полягає в тому, у скільки повторень є вміст. Тож мова не йде про minify vs. gzip. Вони роблять справи по-різному. І ви отримуєте найкраще з обох світів, використовуючи обидва.

Чому б не використовувати обидва?

Це легко перевірити: просто покладіть текст свого css у текстові файли та стисніть файли за допомогою архіватора, як gzip на Linux.

Я щойно це зробив, і трапляється, що для першого css розмір становить 184 байти, а для другого - 162 байта.

Отже, ви маєте рацію, пробіл має значення навіть для gzipped файлів, але, як видно з цього невеликого тесту, для дійсно невеликих файлів розмір стисненого файлу може бути більшим, ніж розмір вихідного файлу.

Це пов’язано з дуже малим розміром вашого прикладу, для великих файлів gzipping отримає менші файли.

Я не бачив, щоб хтось згадував Манглінга, тому я розміщую свої результати з цього приводу.

Ось деякі цифри, які я придумав, використовуючи UflifyJS для мінімізації та Gzip. У мене було близько 20 файлів, які я об'єднав близько 2,5 Мб із коментарями та всі.

Складені файли 2,5 Мб

uglify({
    mangle: false
})

Мінімізований без манґлінгу: 929 кб

uglify({
    mangle: true
})

Мінімізований і маніпульований: 617 кб

Тепер, якщо я візьму ці файли та gzip, я отримаю 239kb та 190kb відповідно.

Існує дуже простий метод перевірки цього: Створіть файл, що складається лише з пробілів та іншого файлу, який справді порожній. Потім Gzip обидва і порівняйте їх розміри. Файл із пробілом у ньому, звичайно, буде більшим.

Звичайно, "людська" втрата стиснення, яка зберігає макет чи якісь інші важливі речі та видаляє непотрібні непотрібні (пробіли, коментарі, зайві речі тощо), буде кращою, ніж стискання gZip без втрат.

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

До речі, для CSS є такі інструменти, як CSS компресор, який зробить збиткові роботи за вас.

Однак ви отримаєте найкращі результати, поєднуючи "оптимізацію втрат" та стиснення без втрат.

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

повернемося до свого запитання - немає певної залежності між довжиною джерела та стислим результатом. ключовим моментом є «ентропія» (наскільки різні елементи в джерелі).

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

це результати, коли gziping два файли

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Ви правильні, мінімізуйте + gzip, це призводить до меншої кількості байтів. Однак наукових доказів немає.

Чому у вас немає методу тестування?

Мінімізуйте свій код в одному файлі, а в іншому залиште його "не зміненим". Завантажте на веб-сервер, який може отримати gziping вихід (mod_deflate для Apache, наприклад), встановіть розширення Firebug для firefox, очистіть кеш і отримайте доступ до обох файлів. Вкладка "NET" Firebug міститиме точну кількість переданих даних, порівняйте їх, і ви маєте "емпіричне" підтвердження.