Сравнение эффективности минимизаторов CSS- и JavaScript-кода (Сентябрь 2013)

За прошедшие, с момента публикации предыдущего обзора, 3 месяца уже успели обновиться почти все рассмотренные алгоритмы минимизации (кроме, Packer`а). Кроме того в Bundle Transformer появился новый модуль-минимизатор на базе Clean-css — BundleTransformer.CleanCss.

При подготовке данного сравнительного обзора были учтены следующие пожелания читателей:

1. В предыдущем обзоре в качестве исходных файлов использовались: bootstrap.css и bootstrap.js из Twitter Bootstrap 2.3.2, из-за чего достоверность результатов была низкой. В новом же обзоре размер выборки был увеличен: для сравнения были отобраны 7 JS-файлов и 5 CSS-файлов из 10 популярных Open Source-проектов.
2. Теперь в сравнении минимизаторов CSS-кода также участвуют встроенные средства минимизации препроцессоров LESS и Sass.
3. Как известно, Bundle Transformer минимизирует каждый файл по отдельности и затем производит объединение минимизированного кода в один файл. Данный механизм сделан для того, чтобы предотвратить повторную минимизацию предварительно минимизированных файлов. Другие аналогичные библиотеки сначала объединяют код файлов, а затем минимизируют этот объединенный файл. Поэтому для полноты картины мы произведем 2 сравнения: сначала сравним эффективность минимизаторов на файлах, полученных путем объединения минимизированного кода, а затем на файлах, полученных путем минимизации объединенного кода файлов.

Как и в предыдущем обзоре, для минимизации файлов мы будем использовать модули Bundle Transformer, а для измерения размеров полученных файлов – расширение YSlow.

Реклама

Результаты опроса «Чем вы минифицируете внешние стили и скрипты в ASP.NET?»

В эту среду на Хабре стартовал опрос «Чем вы минифицируете внешние стили и скрипты в ASP.NET?», целью которого было определить наиболее популярные инструменты клиентской оптимизации для ASP.NET, с помощью которых можно «на лету» минимизировать код внешних стилей и скриптов. В список вошли следующие инструменты клиентской оптимизации:

• ASP.NET Web Optimization Framework (также известен как Bundling and Minification)
• ASP.NET Web Optimization Framework + Bundle Transformer
• Cassette.Aspnet
• Combres
• RequestReduce
• SquishIt

В опросе приняли участие 213 русскоязычных ASP.NET-разработчиков. Привожу результаты опроса:

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

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

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

Бандл… Пара-пара-па хэй! или Bundle Transformer шагает по планете

Несколько дней назад я обнаружил, что мой Twitter-аккаунт @taritsyn был взломан и через него в течение двух недель рассылался спам на русском и украинском языке. Я был очень удивлен, что стал мишенью для спамеров, т.к. мой твиттер читает сравнительно небольшое количество подписчиков.

Я решил выяснить, почему мной заинтересовались спамеры, и после нескольких часов гугления, понял, что мой Open Source-проект Bundle Transformer стал пользоваться популярностью. Я обнаружил большое количество упоминаний о Bundle Transformer в блогах и твиттер-лентах зарубежных технических специалистов. Среди этих упоминаний есть и серьезные технические статьи:

WebMarkupMin HTML Minifier – современный HTML-минимизатор для платформы .NET

В начале 2012 года я работал над серией статей о клиентской оптимизации в ASP.NET MVC для журнала MSDeveloper.RU. Всего было опубликовано 2 статьи: «Сжатие JS- и CSS-файлов» и «Менеджеры ресурсов», но в моих планах было написать еще 2 статьи: одну про оптимизацию графики, а вторую про минимизацию HTML-разметки и GZIP/Deflate-сжатие (далее просто HTTP-сжатие). К сожалению, эти планы не удалось воплотить в жизнь из-за нехватки свободного времени (в тот момент, я запускал проект Bundle Transformer) и последовавшего закрытия журнала.

Но недавно я решил вернуться к теме оптимизации HTML-разметки. После небольшого исследования я понял, что под .NET практически не существует полноценных HTML-минимизаторов. Все существующие .NET-решения производят лишь 2 операции: удаление ненужных пробельных символов и удаление HTML-комментариев, из-за чего они очень сильно проигрывают решениям с других платформ. Поэтому я решил написать собственный HTML-минимизатор для .NET, о котором и пойдет речь в данной статье.

Эволюция HTML-минимизаторов

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

Вопреки расхожему мнению, техники минимизации HTML-кода появились намного раньше, чем аналогичные техники для JavaScript. Уже в конце 1998 года Артемий Лебедев в 17-м параграфе ководства «Паранойя оптимизатора» описывал некоторые техники минимизации HTML-кода.

Вышел Bundle Transformer 1.6.10

Новая версия Bundle Transformer характеризуется следующими изменениями: большая часть сборок теперь подписана; в ядре, были исправлены ошибки, возникавшие при обработке путей; были обновлены некоторые модули (BundleTransformer.SassAndScss, BundleTransformer.CoffeeScript, BundleTransformer.TypeScript, BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.UglifyJs, BundleTransformer.Csso и BundleTransformer.WG) и создана новая версия демонстрационного сайта ASP.NET Web Pages.

Рассмотрим основные нововведения данной версии:

Презентация «Bundle Transformer – инструмент для клиентской оптимизации в среде ASP.NET» с MoscowJS 8th

2 ноября в офисе компании «Яндекс» прошла 8-я встреча московского сообщества JavaScript-разработчиков MoscowJS. Мне посчастливилось выступить на этом мероприятии с докладом о своем продукте — Bundle Transformer.