- PVSM.RU - https://www.pvsm.ru -

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

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

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

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

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

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

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

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

К сожалению, структурный минимизатор от компании Microsoft [11] — 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 [12] 34,5 КБ 44,26% 11,1 КБ 34,32%
EdwardsJsMinifier Packer 3.0 [13] 31,3 КБ 49,43% 10,4 КБ 38,46%
YuiJsMinifier YUI JS Compressor for .Net 2.2.0.0 [5] 28,8 КБ 53,47% 10,0 КБ 40,83%
ClosureLocalJsMinifier Closure Compiler Application от 11.04.2013 (режим Simple) [14] 28,1 КБ 54,60% 9,7 КБ 42,60%
MicrosoftAjaxJsMinifier Microsoft Ajax JS Minifier 4.92 [6] 28,3 КБ 54,28% 9,8 КБ 42,01%
UglifyJsMinifier UglifyJS 2.3.6 [15] 28,3 КБ 54,28% 9,8 42,01%

Как и следовало ожидать, 1-е место занял минимизатор Closure Compiler от компании Google [16]. Следует также отметить, что в режиме 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 в мире.

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

Опрос

В заключении статьи предлагаю вам принять участие в опросе:

Автор: Taritsyn

Источник [17]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/35768

Ссылки в тексте:

[1] Bundle Transformer: http://bundletransformer.codeplex.com/

[2] «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?»: http://taritsyn.wordpress.com/2012/09/23/vyshel-bundle-transformer-1-6-2-ili-chto-izmenilos-za-polgoda/

[3] Twitter Bootstrap: http://twitter.github.io/bootstrap/

[4] YSlow: http://yslow.org/

[5] YUI CSS Compressor for .Net 2.2.0.0: http://yuicompressor.codeplex.com/

[6] Microsoft Ajax CSS Minifier 4.92: http://ajaxmin.codeplex.com/

[7] CSSO 1.3.7: http://github.com/css/csso

[8] WebGrease Semantic CSS Minifier 1.3.0: http://webgrease.codeplex.com/

[9] Яндекс: http://company.yandex.ru/

[10] методологии БЭМ: http://ru.bem.info/tools/csso/

[11] Microsoft: http://www.microsoft.com

[12] JSMin от 22.05.2007: http://www.crockford.com/javascript/jsmin.html

[13] Packer 3.0: http://dean.edwards.name/packer/

[14] Closure Compiler Application от 11.04.2013 (режим Simple): http://developers.google.com/closure/compiler/docs/gettingstarted_app

[15] UglifyJS 2.3.6: http://github.com/mishoo/UglifyJS2

[16] Google: https://www.google.ru/intl/ru/about/company/

[17] Источник: http://habrahabr.ru/post/181880/