WebMarkupMin: Минимизация представлений KnockoutJS и AngularJS

Логотипы WebMarkupMin, KnockoutJS и AngularJSНачиная с версия 0.9.0 в WebMarkupMin поддерживается минимизация представлений KnockoutJS (далее просто Knockout) и AngularJS (далее просто Angular). Многие из вас могут задать вопрос: «Почему Knockout и Angular, а не Mustache или Underscore?». Этот выбор был сделан по следующим причинам: Шаблоны на основе DOM. Шаблонизаторы, встроенные в Knockout и Angular, базируются на DOM-шаблонах (DOM-based templates), а не на строковых шаблонах (string-based templates) как Mustache и Underscore. Код таких шаблонов не содержит программных вставок (например, {{…}} или <%…%>) за пределами текстового содержимого элементов (тегов) и значений атрибутов, что позволяет минимизировать его как обычный HTML. Популярность среди .NET-разработчиков. Knockout изначально создавался для .NET-разработчиков, чтобы позволить им перенести свой опыт разработки MVVM-приложений из WPF и Silverlight в обычный веб. Что же касается Angular, то он вообще не нуждается в представлении и его популярность среди веб-разработчиков в целом бьет все возможные рекорды. Помимо этого популярности этих библиотек среди .NET-разработчиков способствовало огромное количество статей евангелиста Microsoft Джона Папы. Высокая эффективность сжатия выражений привязки. Выражения привязки в Knockout и Angular фактически являются простым JavaScript-кодом или объектами в формате JSON, которые можно сжать JS-минимизатором. Новые конфигурационные свойстваПо умолчанию минимизация представлений отключена, и чтобы включить ее нужно изменить значения следующих свойств класса HtmlMinificationSettings: Свойство Тип данных Значение по умолчанию Описание ProcessableScriptTypeList Строка Пустая строка Содержит разделенный запятыми список типов тегов script (например, text/html, text/ng-template), содержимое которых должно быть обработано HTML-минимизатором. MinifyKnockoutBindingExpressions Булевский false Флаг, отвечающий за минимизацию выражений привязки Knockout в атрибутах data-bind и безконтейнерных комментариях. MinifyAngularBindingExpressions Булевский false Флаг, отвечающий за минимизацию выражений привязки Angular в Mustache-подобных тегах ({{ }}) и директивах. CustomAngularDirectiveList Строка Пустая строка Содержит разделенный запятыми список пользовательских Angular-директив (например, myDir, btfCarousel), которые содержат выражения привязки. Если значение свойства MinifyAngularBindingExpressions равно true, то выражения в пользовательских директивах будут минимизированы. Рассмотрим каждое свойство более подробно: ProcessableScriptTypeList До версии 0.9.0 теги script, не содержащие JavaScript-кода, просто игнорировались HTML-минимизатором. Это было сделано потому, что в этих тегах может содержаться все что угодно: от кода на VBScript до Handlebars-шаблонов. Но в тоже время, если тег script содержит код DOM-шаблона, то его стоило бы пропустить через HTML-минимизатор. Поэтому пользователям была дана возможность самим определять список допустимых типов содержимого.Возвращаясь к теме статьи, приведу несколько примеров:

Если нужно минимизировать представления Knockout, то свойству ProcessableScriptTypeList нужно присвоить значение равное text/html. Если мы имеем дело с представлениями Angular, то — text/ng-template. Если в проекте используются сразу две библиотеки, то нужно перечислить типы содержимого через запятую: text/html, text/ng-template. Также нужно понимать, что мы не ограничены только Knockout и Angular, теоретически у нас есть возможность минимизировать любой основанный на DOM шаблон (например, мы можем указать тип содержимого text/x-kendo-tmpl для представлений Kendo MVVM, которые мало чем отличаются от Knockout).MinifyKnockoutBindingExpressions Обычно когда я рассказываю про WebMarkupMin, то в качестве примера привожу код файла shell.html из демонстрационного проекта HotTowel:

После минимизации этот код принимает следующий вид:
Сразу бросается в глаза, что выражения привязки (далее просто выражения) в безконтейнерных комментариях (так называемый containerless control flow syntax) содержат слишком много пробельных символов и их стоило бы минимизировать.Возьмем для примера выражение compose: {view: 'nav'}, которое, по своей сути, является объектом в формате JSON без внешних фигурных скобок. Мы можем обернуть его в фигурные скобки: {compose: {view: 'nav'}}, и обработать JS-минимизатором. Затем удалить из минимизированного кода внешние фигурные скобки и вернуть его обратно в безконтейнерный комментарий.

Если свойству MinifyKnockoutBindingExpressions присвоить значение равное true, то к выражениям будут применены все описанные выше действия. Для этих целей в качестве JS-минимизатора всегда используется CrockfordJsMinifier, потому что только он может корректно минимизировать JSON-код (MsAjaxJsMinifier и YuiJsMinifier не подходят для этих целей).

С новыми настройками мы получим следующий код:

Те же самые действия производятся и с атрибутами data-bind. Например, у нас есть следующий код: 50?'expensive':'cheap'»> MinifyAngularBindingExpressions Согласно документации, выражения в Angular — это JavaScript-подобные фрагменты кода. Тем не менее, их можно минимизировать с помощью CrockfordJsMinifier. Единственную проблему представляли лишь одноразовые выражения привязки (начинаются с ::). Оригинальный JSMin всегда удалял идущие перед ними пробельные символы, но после внесения небольших изменений в код CrockfordJsMinifier проблема была устранена.В Angular выражения могут содержаться в Mustache-подобных тегах ({{ }}) и директивах.

В свою очередь, Mustache-подобные теги могут находиться в текстовом содержимом элементов:

Price: {{ 3×10 | currency }} и в значениях атрибутов: Соответственно, если свойству MinifyAngularBindingExpressions присвоить значение равное true, то мы получим следующие результаты: Price: {{3×10|currency}} и  С директивами дело обстоит намного сложнее. В коде шаблонов директивы могут быть представлены 4-мя способами: В виде элементов В виде атрибутов Как содержимое атрибутов class В виде комментариев Названия директив, также могут иметь различные варианты написания. Например, для директивы ngBind существуют следующие варианты: ng-bind ng: bind ng_bind x-ng-bind data-ng-bind Все эти особенности учитываются при минимизации.Кроме того, не все директивы содержат выражения. Некоторые директивы могут также содержать: шаблоны, простые значения или вообще ничего. Для того, чтобы отделить директивы, содержащие выражения, от других директив используется следующий список: ngBind, ngBindHtml, ngBlur, ngChange, ngChecked, ngClass, ngClassEven, ngClassOdd, ngClick, ngController, ngCopy, ngCut, ngDblclick, ngDisabled, ngFocus, ngHide, ngIf, ngInit, ngKeydown, ngKeypress, ngKeyup, ngModelOptions, ngMousedown, ngMouseenter, ngMouseleave, ngMousemove, ngMouseover, ngMouseup, ngOpen, ngPaste, ngReadonly, ngRepeat, ngRepeatStart, ngSelected, ngShow, ngStyle, ngSubmit и ngSwitch.

Элементы HTML-минимизатор обрабатывает всего одну директиву-элемент — ngPluralize. Если говорить более конкретно, то минимизируются выражения в атрибутах count и when.Предположим, что у нас есть следующий код:

После минимизации он будет выглядеть следующим образом: Атрибуты Минимизация выражений в директивах-атрибутах в Angular даже проще, чем минимизация содержимого атрибутов data-bind в Knockout, потому что здесь не нужно думать о внешних фигурных скобках.Рассмотрим минимизацию выражений в директивах-атрибутах на примере директивы ngRepeat:

  • {{customer.name}} — {{customer.city}}
  • Несмотря на то, что атрибут содержит «некорректный» код (с точки зрения JavaScript), минимизация все равно проходит успешно:
  • {{customer.name}} — {{customer.city}}
  • Классы Главное отличие директив-классов от директив-атрибутов заключается в том, что в атрибуте class может содержаться сразу несколько директив: Была решена и эта проблема: Комментарии К сожалению, в Angular нет ни одной встроенной директивы, которая могла бы быть представлена в виде комментария. Поэтому мы рассмотрим немного надуманный пример, где в качестве директивы-комментария будет использоваться пользовательская директива myDir: После минимизации получим следующий код: CustomAngularDirectiveList Поскольку в Angular существует возможность создавать свои собственные директивы, то пользователям была предоставлена возможность добавлять названия этих директив в специальный список. Пользовательские директивы, указанные в свойстве CustomAngularDirectiveList, будут обрабатываться минимизатором также как встроенные директивы Angular.Поддержка в Web Essentials 2013 Если вы храните свои представления в отдельных HTML-файлах, то от стандартных ASP.NET-расширений, идущих в комплекте с WebMarkupMin, будет мало пользы. В этом случае вам нужен принципиально другой инструмент, который будет минимизировать HTML-файлы на этапе сборки проекта. На данный момент есть только один такой инструмент — это VS-расширение Web Essentials 2013.Последняя стабильная версия Web Essentials 2013 (версия 2.3) поддерживает старую версию WebMarkupMin (версию 0.8.21). Поэтому вам нужно будет установить ночную сборку Web Essentials 2013 (на сайте расширения есть инструкция по установке).

    Последняя, на момент написания статьи, ночная сборка (версия 2.3.4.1) поддерживает WebMarkupMin 0.9.3 и позволяет настроить все рассмотренные конфигурационные свойства:

    Настройки HTML-минимизации в Web Essentials 2013 (версия 2.3.4.1)

    Ссылки Страница проекта WebMarkupMin на CodePlex Статья «WebMarkupMin HTML Minifier — современный HTML-минимизатор для платформы .NET» Официальный сайт VS-расширения Web Essentials Статья «HTML-минимизация в Web Essentials 2013» Статья «HTML-минимизация в Web Essentials 2013: Что изменилось за год?»

    © Habrahabr.ru