Главная > .NET, JavaScript > Сравнение эффективности минимизаторов CSS- и JS-кода

Сравнение эффективности минимизаторов CSS- и JS-кода

Логотипы модулей-минимизаторов из Bundle Transformer

Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.

В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.

Сравнение минимизаторов CSS-кода

Размер исходного файла bootstrap.css составляет 127,3 КБ, а после применения GZip-сжатия — 27,9 КБ. В таблице приведена информация о размерах файлов, полученных путем применения к файлу bootstrap.css различных алгоритмов CSS-минимизации:

Адаптер-минимизатор Алгоритм минимизации Размер после минимизации Экономия Размер после минимизации с GZip-
сжатием
Экономия при GZip-
сжатии
YuiCssMinifier YUI CSS Compressor for .Net 2.2.0.0 106,0 КБ 16,73% 24,5 КБ 12,19%
MicrosoftAjaxCss­Minifier Microsoft Ajax CSS Minifier 4.92 105,7 КБ 16,97% 24,5 КБ 12,19%
KryzhanovskyCss­Minifier CSSO 1.3.7 105,6 КБ 17,05% 24,6 КБ 11,83%
WgCssMinifier WebGrease Semantic CSS Minifier 1.3.0

Из таблицы видно, что наилучший результат показал минимизатор CSSO (CSS Optimizer) от компании Яндекс. Основным достоинством данного минимизатора является поддержка структурной минимизации CSS-кода (о структурной минимизации можно более подробно прочитать на сайте методологии БЭМ).

К сожалению, структурный минимизатор от компании Microsoft — WebGrease Semantic CSS Minifier, выбыл из борьбы, потому что не смог минимизировать файл bootstrap.css.

Другой минимизатор от Microsoft — Microsoft Ajax CSS Minifier наоборот показал очень хороший результат по сравнению со своим основным конкурентом YUI CSS Compressor for .Net.

Сравнение минимизаторов JS-кода

Размер исходного файла bootstrap.js составляет 61,9 КБ, а после применения GZip-сжатия — 16,9 КБ. В таблице приведена информация о размерах файлов, полученных путем применения к файлу bootstrap.js различных алгоритмов JS-минимизации:

Адаптер-минимизатор Алгоритм минимизации Размер после минимизации Экономия Размер после минимизации с GZip-
сжатием
Экономия при GZip-
сжатии
CrockfordJsMinifier JSMin от 22.05.2007 34,5 КБ 44,26% 11,1 КБ 34,32%
EdwardsJsMinifier Packer 3.0 31,3 КБ 49,43% 10,4 КБ 38,46%
YuiJsMinifier YUI JS Compressor for .Net 2.2.0.0 28,8 КБ 53,47% 10,0 КБ 40,83%
ClosureLocalJs­Minifier Closure Compiler Application от 11.04.2013 (режим Simple) 28,1 КБ 54,60% 9,7 КБ 42,60%
MicrosoftAjaxJs­Minifier Microsoft Ajax JS Minifier 4.92 28,3 КБ 54,28% 9,8 КБ 42,01%
UglifyJsMinifier UglifyJS 2.3.6 28,3 КБ 54,28% 9,8 КБ 42,01%

Как и следовало ожидать, 1-е место занял минимизатор Closure Compiler от компании Google. Следует также отметить, что в режиме Advanced можно достичь еще более лучших результатов.

Как и в случае с CSS-минимизацией Microsoft Ajax JS Minifier обошел YUI JS Compressor for .Net. Кроме того, при сжатии файла bootstrap.js Microsoft Ajax JS Minifier и UglifyJS показали одинаковый результат и оба заняли 2-е место.

Старейшие минимизаторы JSMin и Packer показали худшие результаты. Кроме того, код, минимизированный Packer, содержал ошибки.

Выводы

Безусловно, в битве минимизаторов победили поисковые гиганты Яндекс и Google.

Но и компания Microsoft не сидела сложа руки: хоть команда Рона Логана еще не выпустила стабильную версию WebGrease Semantic CSS Minifier, но они смогли поднять Microsoft Ajax Minifier на совершенно новый уровень.

UglifyJS по-прежнему можно считать JS-минимизатором №2 в мире.

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

Опрос

В Хабра-версии данной статьи был проведен опрос, целью которого являлось определение наиболее популярных алгоритмов минимизации CSS- и JS-кода. Привожу результаты опроса:

Круговая диаграмма с результатами опроса «Какой алгоритм минимизации CSS-кода вы используете в своих проектах?»

Проголосовало 378 человек

Круговая диаграмма с результатами опроса «Какой алгоритм минимизации JavaScript-кода вы используете в своих проектах?»

Проголосовало 498 человек

Из результатов опроса можно сделать вывод, что наибольшую распространенность получили кроссплатформенные минимизаторы, написанные на Java (Closure Compiler и YUI Compressor) и JavaScript под Node.js (UglifyJS и CSSO). Больше всего, меня удивил UglifyJS, который слегка обогнал по популярности Closure Compiler. Крокфорд был прав, когда говорил, что JavaScript постепенно занимает нишу, изначально отведенную для Java.

Реклама
  1. 13.09.2013 в 08:00

    Есть прекрасный компрессор уже минифаенного js – jscrush. Например, .min-версию jQuery он жмёт с 92 до 62Кб – на треть.

    Адаптированная версия оригинального jscrush – http://jquerymy.com/jscrush/. Чем больше размер фрейма, тем больше – но и дольше – сжатие.

    Он не очень-то подходит для realtime-сжатия, но даёт потрясающие в целом результаты.

    • 15.09.2013 в 11:19

      Здравствуйте, Дмитрий!

      Спасибо за ссылку, но у меня так и не получилось им ничего сжать, потому что постоянно зависал браузер (Firefox 23.0.1). Вообще, JSCrush – это не минимизатор, а компрессор (архиватор). Его идея, чем-то похожа на режим Base62 encode из Packer 3.0. Главное отличие минимизации от компрессии заключается в том, что браузер может сразу интерпретировать минимизированный код.

      В наше время, для компрессии CSS- и JS-кода лучше использовать GZIP/Deflate-сжатие.

      • 17.09.2013 в 04:17

        Сделал компрессию неблокирующей, с процентиками бегущими.

  1. No trackbacks yet.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: