- PVSM.RU - https://www.pvsm.ru -
За прошедшие, с момента публикации предыдущего обзора [1], 3 месяца уже успели обновиться почти все рассмотренные алгоритмы минимизации (кроме, Packer`а). Кроме того в Bundle Transformer [2] появился новый модуль-минимизатор на базе Clean-css — BundleTransformer.CleanCss [3].
При подготовке данного сравнительного обзора были учтены следующие пожелания читателей:
bootstrap.css
и bootstrap.js
из Twitter Bootstrap 2.3.2 [4], из-за чего достоверность результатов была низкой. В новом же обзоре размер выборки был увеличен: для сравнения были отобраны 7 JS-файлов и 5 CSS-файлов из 10 популярных Open Source-проектов.
Как и в предыдущем обзоре, для минимизации файлов мы будем использовать модули Bundle Transformer, а для измерения размеров полученных файлов – расширение YSlow [7].
Сравним следующие алгоритмы минимизации CSS-кода:
Таблица 1. Информация об адаптерах и алгоритмах минимизации CSS-кода
Адаптер | Алгоритм минимизации | Сайт исходной библиотеки |
---|---|---|
YuiCssMinifier |
YUI CSS Compressor for .Net 2.3.0.0 | http://yuicompressor.codeplex.com [8] |
MicrosoftAjaxCssMinifier |
Microsoft Ajax CSS Minifier 4.97 | http://ajaxmin.codeplex.com [9] |
KryzhanovskyCssMinifier |
CSSO 1.3.8 | http://github.com/css/csso [10] |
WgCssMinifier |
WebGrease Semantic CSS Minifier 1.5.2 | http://webgrease.codeplex.com [11] |
CleanCssMinifier |
Clean-css 1.1.1 | http://github.com/GoalSmashers/clean-css [12] |
LessTranslator |
LESS 1.4.2 (режим сжатия соответствует настройкам исходной библиотеки с опцией compress равной true ) |
http://lesscss.org [5] |
SassAndScssTranslator |
Sass 3.2.10 (режим сжатия соответствует настройкам исходной библиотеки с опцией :style равной compressed ) |
http://sass-lang.com [6] |
Для того, чтобы использовать адаптеры-трансляторы LessTranslator
и SassAndScssTranslator
в качестве минимизаторов, нужно изменить расширения исходных CSS-файлов на .less
(и .scss
соответсвенно) и присвоить конфигурационному свойству useNativeMinification
значение равное true
.
В качестве исходных файлов мы будем использовать:
bootstrap.css
из Twitter Bootstrap [13] 3.0.0jquery-ui-1.10.3.custom.css
из jQuery UI [14] 1.10.3animate.css
из Animate.css [15] от 15.08.2013hint.css
из Hint.css [16] 1.3.0zocial.css
из Zocial CSS social buttons [17] от 02.12.2012Размер объединенного файла составляет 296,2 КБ, а после применения GZip-сжатия — 98,7 КБ.
Таблица 2. Результат применения алгоритмов CSS-минимизации к каждому файлу по отдельности
Адаптер | Размер после минимизации, КБ | Экономия | Размер после минимизации с GZip-сжатием, КБ | Экономия при GZip-сжатии | ||
---|---|---|---|---|---|---|
в КБ | в % | в КБ | в % | |||
YuiCssMinifier |
239,7 | 56,5 | 19,07 | 79,9 | 18,8 | 19,05 |
MicrosoftAjaxCssMinifier |
238,7 | 57,5 | 19,41 | 79,5 | 19,2 | 19,45 |
KryzhanovskyCssMinifier |
234,1 | 62,1 | 20,97 | 78,0 | 20,7 | 20,97 |
WgCssMinifier |
- | - | - | - | - | - |
CleanCssMinifier |
240,6 | 55,6 | 18,77 | 80,2 | 18,5 | 18,74 |
LessTranslator |
240,0 | 56,2 | 18,97 | 80,0 | 18,7 | 18,95 |
SassAndScssTranslator |
241,2 | 55,0 | 18,57 | 80,4 | 18,3 | 18,54 |
Таблица 3.Результат применения алгоритмов CSS-минимизации к объединенному файлу
Адаптер | Размер после минимизации, КБ | Экономия | Размер после минимизации с GZip-сжатием, КБ | Экономия при GZip-сжатии | ||
---|---|---|---|---|---|---|
в КБ | в % | в КБ | в % | |||
YuiCssMinifier |
239,7 | 56,5 | 19,07 | 79,9 | 18,8 | 19,05 |
MicrosoftAjaxCssMinifier |
238,7 | 57,5 | 19,41 | 79,5 | 19,2 | 19,45 |
KryzhanovskyCssMinifier |
232,4 | 63,8 | 21,54 | 77,4 | 21,3 | 21,58 |
WgCssMinifier |
- | - | - | - | - | - |
CleanCssMinifier |
240,6 | 55,6 | 18,77 | 80,2 | 18,5 | 18,74 |
LessTranslator |
240,0 | 56,2 | 18,97 | 80,0 | 18,7 | 18,95 |
SassAndScssTranslator |
241,2 | 55,0 | 18,57 | 80,4 | 18,3 | 18,54 |
Рис. 1. Экономия за счет использования алгоритмов CSS-минимизации (в килобайтах)
Из графика хорошо видно, что, как и в прошлый раз, наилучший результат показал минимизатор CSSO (CSS Optimizer) от компании Яндекс [18]. Но не обошлось и без ложки дегтя: дополнительный выигрыш в 1,7 КБ при сжатии объединенного файла, был получен за счет удаления двух комментариев вида: /*! какой-нибудь текст */
. Как правило, в таких комментариях содержится информация о версии библиотеки и ее разработчиках. CSSO оставляет лишь первый такой комментарий, а остальные удаляет.
Microsoft Ajax CSS Minifier снова показал хороший результат по сравнению своим основным конкурентом — YUI CSS Compressor for .Net.
Больше всего меня удивил новичок — Clean-css от компании Goal Smashers! [19]. От столь популярного в Node.js-сообществе CSS-минимизатора (Clean-css используется пакетом grunt-contrib-cssmin [20]) я ожидал большей степени сжатия. По эффективности минимизации он расположился между встроенными минимизаторами препроцессоров LESS и Sass.
Новая версия структурного минимизатора от компании Microsoft [21] — WebGrease Semantic CSS Minifier до сих пор содержит в себе критические ошибки:
@charset
и правило @-o-keyframes
.Поэтому WebGrease Semantic CSS Minifier опять выбывает из борьбы.
Из графика практически не видно, что файлы, полученные путем минимизации файла с объединенным кодом (исключение составляет файл, обработанный с помощью CSSO), по размеру немного меньше файлов, собранных из отдельно минимизированных файлов. Меньший размер таких файлов объясняется двумя причинами:
@charset
были объединены в одну.Поэтому можно сделать вывод: что минимизация файла с объединенным кодом практически не дает выигрыша в размере файла.
Сравним следующие алгоритмы минимизации JS-кода:
Таблица 4. Информация об адаптерах и алгоритмах минимизации JS-кода
Адаптер | Алгоритм минимизации | Сайт исходной библиотеки |
---|---|---|
CrockfordJsMinifier |
JSMin от 29.03.2013 | http://github.com/douglascrockford/JSMin [22] |
YuiJsMinifier |
YUI JS Compressor for .Net 2.3.0.0 | http://yuicompressor.codeplex.com [23] |
ClosureLocalJsMinifier |
Closure Compiler Application от 26.08.2013 (режим Simple) | http://developers.google.com/closure/compiler/docs/gettingstarted_app [24] |
MicrosoftAjaxJsMinifier |
Microsoft Ajax JS Minifier 4.97 | http://ajaxmin.codeplex.com [9] |
UglifyJsMinifier |
UglifyJS 2.4.0 | http://github.com/mishoo/UglifyJS2 [25] |
Если вы уже заметили, то в приведенном выше списке отсутствует адаптер-минимизатор EdwardsJsMinifier
. Поскольку поддерживаемый им алгоритм минимизации Packer 3.0 не менялся с 2007 года, то я решил не включать его в данный обзор.
В качестве исходных файлов мы будем использовать:
bootstrap.js
из Twitter Bootstrap [13] 3.0.0jquery-ui-1.10.3.custom.js
из jQuery UI [14] 1.10.3MicrosoftAjax.debug.js
из Microsoft AJAX Framework [26] 4.0.0.0knockout-2.3.0.debug.js
из Knockout [27] 2.3.0jsrender.js
из JsRender [28] 1.0.0-betalinq.js
из LINQ for JavaScript [29] 2.2.0.2moment.js
из Moment.js [30] 2.1.0Размер объединенного файла составляет 1218,9 КБ, а после применения GZip-сжатия — 406,3 КБ.
Таблица 5. Результат применения алгоритмов JS-минимизации к каждому файлу по отдельности
Адаптер | Размер после минимизации, КБ | Экономия | Размер после минимизации с GZip-сжатием, КБ | Экономия при GZip-сжатии | ||
---|---|---|---|---|---|---|
в КБ | в % | в КБ | в % | |||
CrockfordJsMinifier |
713,5 | 505,4 | 41,46 | 237,8 | 168,5 | 41,47 |
YuiJsMinifier |
593,0 | 625,9 | 51,35 | 197,6 | 208,7 | 51,37 |
ClosureLocalJsMinifier |
525,4 | 693,5 | 56,90 | 175,1 | 231,2 | 56,90 |
MicrosoftAjaxJsMinifier |
527,7 | 691,2 | 56,71 | 175,9 | 230,4 | 56,71 |
UglifyJsMinifier |
531,1 | 687,8 | 56,43 | 177,0 | 229,3 | 56,44 |
Таблица 6. Результат применения алгоритмов JS-минимизации к объединенному файлу
Адаптер | Размер после минимизации, КБ | Экономия | Размер после минимизации с GZip-сжатием, КБ | Экономия при GZip-сжатии | ||
---|---|---|---|---|---|---|
в КБ | в % | в КБ | в % | |||
CrockfordJsMinifier |
713,4 | 505,5 | 41,47 | 237,8 | 168,5 | 41,47 |
YuiJsMinifier |
593,0 | 625,9 | 51,35 | 197,6 | 208,7 | 51,37 |
ClosureLocalJsMinifier |
525,3 | 693,6 | 56,90 | 175,1 | 231,2 | 56,90 |
MicrosoftAjaxJsMinifier |
527,7 | 691,2 | 56,71 | 175,9 | 230,4 | 56,71 |
UglifyJsMinifier |
533,1 | 685,8 | 56,26 | 177,7 | 228,6 | 56,26 |
Рис. 2. Экономия за счет использования алгоритмов JS-минимизации (в килобайтах)
Из приведенных выше данных видно, что минимизатор Closure Compiler от компании Google [31] по-прежнему на первом месте.
Microsoft Ajax JS Minifier на этот раз обогнал UglifyJS и по праву занял второе место.
Вообще, UglifyJS меня очень сильно удивил тем, что при минимизации файла с объединенным кодом размер результирующего файла не только не уменьшился, а наоборот увеличился. Что говорит о некоторых недоработках в алгоритме.
YUI JS Compressor for .Net сильно отстал от первой тройки минимизаторов, что свидетельствует об устаревании его алгоритма.
Несмотря на то, что JSMin до сих развивается, принципы, заложенные в нем, остались прежними: никакого вмешательства в логику скрипта, только удаление комментариев и пробельных символов. Поэтому в данном обзоре JSMin является даже не участником, а выполняет роль нижней границы.
Также как и в случае с CSS-минимизаторами мы получили совсем незначительный выигрыш от минимизации файла с объединенным кодом.
Как и в прошлый раз, битву минимизаторов выиграли поисковые гиганты — Яндекс и Google. Приятно сознавать, что лучший CSS-минимизатор был создан российской компанией.
Несмотря на серьезные проблемы с минимизатором WebGrease Semantic CSS Minifier, компания Microsoft добилась серьезных успехов при разработке семейства минимизаторов Microsoft Ajax Minifier.
В заключении статьи предлагаю вам принять участие в опросе:
Автор: Taritsyn
Источник [32]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/43209
Ссылки в тексте:
[1] предыдущего обзора: http://habrahabr.ru/post/181880/
[2] Bundle Transformer: http://bundletransformer.codeplex.com/
[3] BundleTransformer.CleanCss: http://nuget.org/packages/BundleTransformer.CleanCss
[4] Twitter Bootstrap 2.3.2: http://getbootstrap.com/2.3.2/
[5] LESS: http://lesscss.org/
[6] Sass: http://sass-lang.com/
[7] YSlow: http://yslow.org/
[8] http://yuicompressor.codeplex.com: http://yuicompressor.codeplex.com/
[9] http://ajaxmin.codeplex.com: http://ajaxmin.codeplex.com/
[10] http://github.com/css/csso: http://github.com/css/csso
[11] http://webgrease.codeplex.com: http://webgrease.codeplex.com
[12] http://github.com/GoalSmashers/clean-css: http://github.com/GoalSmashers/clean-css
[13] Twitter Bootstrap: http://getbootstrap.com/
[14] jQuery UI: http://jqueryui.com/
[15] Animate.css: http://daneden.me/animate/
[16] Hint.css: http://github.com/chinchang/hint.css
[17] Zocial CSS social buttons: http://github.com/samcollins/css-social-buttons
[18] Яндекс: http://company.yandex.ru/
[19] Goal Smashers!: http://www.goalsmashers.com
[20] grunt-contrib-cssmin: http://npmjs.org/package/grunt-contrib-cssmin
[21] Microsoft: http://www.microsoft.com
[22] http://github.com/douglascrockford/JSMin: http://github.com/douglascrockford/JSMin
[23] http://yuicompressor.codeplex.com: http://yuicompressor.codeplex.com
[24] http://developers.google.com/closure/compiler/docs/gettingstarted_app: http://developers.google.com/closure/compiler/docs/gettingstarted_app
[25] http://github.com/mishoo/UglifyJS2: http://github.com/mishoo/UglifyJS2
[26] Microsoft AJAX Framework: http://www.asp.net/ajax
[27] Knockout: http://knockoutjs.com/
[28] JsRender: http://github.com/BorisMoore/jsrender
[29] LINQ for JavaScript: http://linqjs.codeplex.com/
[30] Moment.js: http://momentjs.com/
[31] Google: http://www.google.ru/intl/ru/about/company/
[32] Источник: http://habrahabr.ru/post/193556/
Нажмите здесь для печати.