Bundle Transformer – инструмент для клиентской оптимизации в среде ASP.NET АНДРЕЙ ТАРИЦЫН taritsyn@gmail.com www.taritsyn.ru MoscowJS 8th, 2 ноября 2012. - презентация

1 Bundle Transformer – инструмент для клиентской оптимизации в среде ASP.NET АНДРЕЙ ТАРИЦЫН MoscowJS 8th, 2 ноября 2012 года Веб-разработчик

2 Bundle Transformer – это модульное расширение для Microsoft ASP.NET Web Optimization Framework. Исходный код Bundle Transformer распространяется под Open Source- лицензией Apache License 2.0 и его можно загрузить с CodePlex Для установки Bundle Transformer следует использовать пакетный менеджер NuGet ( Что такое Bundle Transformer?

3 Краткий обзор возможностей Microsoft ASP.NET Web Optimization Framework

4 Проект Web Optimization Microsoft ASP.NET Web Optimization Framework – это библиотека, позволяющая автоматизировать клиентскую оптимизацию в ASP.NET- приложениях. Данный продукт также известен под следующими названиями: ASP.NET Bundling and Minification System.Web.Optimization Microsoft.Web.Optimization ASP.NET Optimization – Bundling

5 Основные возможности 1.Применяет различные трансформации к таблицам стилей и скриптам. По умолчанию производится только минимизация кода (позволяет сократить размер CSS- и JS-файлов). 2.Объединяет код файлов (позволяет сократить количество HTTP- запросов). 3.Производит кэширование обработанного кода в памяти сервера и кэше браузера, а также управляет устареванием обоих типов кэша. 4.Поддерживает возможность размещения файлов на CDN.

6 Поддерживаемые ASP.NET-фреймворки Продукт написан под.NET Framework 4.0 и поддерживает следующие ASP.NET-фреймворки: 1.ASP.NET MVC 3 и 4 2.ASP.NET Web Forms 4 и ASP.NET Web Pages (в качестве среды разработки можно использовать WebMatrix)

7 Создание var bundles = BundleTable.Bundles; var cssTransformer = new CssMinify(); var jsTransformer = new JsMinify(); var commonStylesBundle = new Bundle("~/Bundles/CommonStyles"); commonStylesBundle.Include("~/Content/Site.css", …); commonStylesBundle.Transforms.Add(cssTransformer); bundles.Add(commonStylesBundle); var modernizrBundle = new Bundle("~/Bundles/Modernizr"); modernizrBundle.Include("~/Scripts/modernizr-2.*"); modernizrBundle.Transforms.Add(jsTransformer); bundles.Add(modernizrBundle); var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts"); commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js", "~/Scripts/jquery-{version}.js", … "~/Scripts/knockout-2.*"); commonScriptsBundle.Transforms.Add(jsTransformer); bundles.Add(commonScriptsBundle); … Создавать bundle`ы следует в файле _AppStart.cshtml :

8 Регистрация bundle`ов в - My ASP.NET required: false) Пример регистрации bundle`ов в файле _SiteLayout.cshtml :

9 Режимы работы Режим, в котором находится веб-приложение, определяется на основе следующих настроек: 1.Значения атрибута debug элемента compilation из файла Web.config ( true – режим отладки; false – режим выпуска). 2.Значения свойства BundleTable.EnableOptimizations, которое можно указать в файле _AppStart.cshtml ( true – режим выпуска; false – режим отладки). Причем значение свойства BundleTable.EnableOptimizations имеет приоритет над настройками из файла Web.config.

10 HTML-разметка в режиме отладки Home Page - My ASP.NET Web Page … … … … …

11 HTML-разметка в режиме выпуска Home Page - My ASP.NET Web Page … …

12 Обзор основных возможностей ядра Bundle Transformer

13 Bundle Transformer позволяет устранить некоторые недостатки Microsoft ASP.NET Web Optimization Framework: 1.Удаляет из bundle`а дублирующиеся файлы. 2. Правильно обрабатывает JS-файлы, имеющие расширения в Microsoft`овском стиле ( *.debug.js ). 3. Предотвращает повторную минимизацию предварительно минимизированных файлов (файлы с расширениями *.min.css и *.min.js, а также JS-файлы с расширениями в Microsoft`овском стиле). 4.Преобразует относительные пути в CSS-коде в абсолютные. 5.Позволяет сохранить в объединенном коде порядок файлов, заданный при создании bundle`а (с помощью класса NullOrderer ). Устраняемые недостатки

14 Дополнительные возможности При использовании Microsoft ASP.NET Web Optimization Framework вместе с Bundle Transformer появляются следующие дополнительные возможности: 1.Можно выбрать наиболее подходящий алгоритм минимизации, если установить соответствующий модуль-минимизатор. 2.Доступны модули-трансляторы, которые компилируют код на промежуточных языках (LESS, Sass, SCSS, CoffeeScript и TypeScript) в CSS или JavaScript. 3.При установке модулей-трансляторов также устанавливаются HTTP- хэндлеры, которые обрабатывают HTTP-запросы к файлам с соответствующими расширениями ( *.less, *.sass, *.scss, *.coffee и *.ts ).

15 Подключение Bundle var bundles = BundleTable.Bundles; var cssTransformer = new CssTransformer(); var jsTransformer = new JsTransformer(); var nullOrderer = new NullOrderer(); var commonStylesBundle = new Bundle("~/Bundles/CommonStyles"); commonStylesBundle.Include("~/Content/Site.css", …); commonStylesBundle.Transforms.Add(cssTransformer); commonStylesBundle.Orderer = nullOrderer; bundles.Add(commonStylesBundle); var modernizrBundle = new Bundle("~/Bundles/Modernizr"); modernizrBundle.Include("~/Scripts/modernizr-2.*"); modernizrBundle.Transforms.Add(jsTransformer); modernizrBundle.Orderer = nullOrderer; bundles.Add(modernizrBundle); var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts"); commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js", …); commonScriptsBundle.Transforms.Add(jsTransformer); commonScriptsBundle.Orderer = nullOrderer; bundles.Add(commonScriptsBundle); …

16 Модули-минимизаторы

17 Bundle Transformer: JSMin Содержит адаптер-минимизатор JS-кода – CrockfordJsMinifier, созданный на базе C#-порта JSMin. Основная информация о JSMin Разработчик: Douglas Crockford Сайт: Изначально написан на: C Особенности: 1.Удаляются лишние пробельные символы. 2.Удаляются комментарии. 3.Могут возникать ошибки, если в коде содержатся сложные регулярные выражения.

18 Bundle Transformer: Packer Содержит адаптер-минимизатор JS-кода – EdwardsJsMinifier, созданный на базе Packer 3.0. Основная информация о Packer Разработчик: Dean Edwards Сайт: Написан на: JavaScript (браузер) Особенности : 1.Производит простейшую минимизацию как JSMin. 2.Поддерживает замену имен параметров и локальных переменных на более короткие (обфускация). 3.Поддерживает архивацию кода с помощью алгоритма Base62 (рекомендуется использовать, как замену GZIP/Deflate-сжатия).

19 Bundle Transformer: YUI Содержит 2 адаптера-минимизатора на базе.NET-порта YUI Compressor ( 1.YuiCssMinifier. Минимизирует CSS-код. 2.YuiJsMinifier. Минимизирует JS-код. Основная информация об YUI Compressor Разработчик: компания Yahoo! Сайт: Изначально написан на: Java Особенности: 1.Производит простейшую минимизацию CSS- и JS-кода. 2.Поддерживает обфускацию JS-кода. 3.Производит оптимизацию кода (заменяет инструкции на более короткие эквиваленты, объединяет несколько JS-инструкций в одну и т.д.).

20 Bundle Transformer: Microsoft Ajax Содержит 2 адаптера-минимизатора на базе Microsoft Ajax Minifier: 1. MicrosoftAjaxCssMinifier. Минимизирует CSS-код. 2. MicrosoftAjaxJsMinifier. Минимизирует JS-код. Основная информация о Microsoft Ajax Minifier Разработчик: компания Microsoft Сайт: Написан на:.NET Особенности: 1.По многим показателям похож на YUI Compressor. 2.Может обнаруживать и удалять неиспользуемый JS-код. 3.Обладает очень большим количеством настроек, которые позволяют тонко настроить алгоритм минимизации. 4.Последние версии Microsoft Ajax Minifier немного превосходят по степени сжатия YUI Compressor.

21 Bundle Transformer: UglifyJS Содержит адаптер-минимизатор JS-кода - UglifyJsMinifier, созданный на базе 1-й версии UglifyJS. Основная информация об UglifyJS Разработчик: Mihai Bazon Сайт: Написан на: JavaScript (Node.js) Особенности: по многим показателям похож на JS-минимизатор из Microsoft Ajax Minifier, но обладает более высокой степенью сжатия.

22 Bundle Transformer: Closure Содержит 2 адаптера-минимизатора JS-кода на базе Closure Compiler: 1. ClosureRemoteJsMinifier. Использует веб-сервис. 2. ClosureLocalJsMinifier. Использует консольное Java-приложение. Основная информация о Closure Compiler Разработчик: компания Google Сайт: Написан на: Java Особенности: поддерживает 3 режима минимизации: 1. Whitespace only. Работает как JSMin. 2.Simple optimizations. Напоминает UglifyJS и JS-минимизатор из Microsoft Ajax Minifier. 3. Advanced optimizations. Производит компиляцию JS-кода ( полностью изменяет структуру скрипта ). Для корректной работы требует объявления extern`ов.

23 Bundle Transformer: CSSO Содержит адаптер-минимизатор CSS-кода - KryzhanovskyCssMinifier, созданный на базе CSSO (CSS Optimizer). Основная информация о CSSO Разработчик: компания Яндекс (Сергей Крыжановский и Виталий Харисов) Сайт: Написан на: JavaScript (Node.js и браузер) Особенности: 1. Производит традиционную минимизацию CSS-кода в стиле YUI Compressor. 2. Поддерживает структурную минимизацию CSS-кода (слияние блоков с одинаковыми селекторами, слияние блоков с одинаковыми свойствами, удаление перекрываемых свойств, удаление повторяющихся селекторов, частичное слияние блоков, частичное разделение блоков, удаление пустых ruleset и at-rule, минимизация margin/padding и т.д.).

24 Bundle Transformer: WebGrease Содержит адаптер-минимизатор CSS-кода - WgCssMinifier, созданный на базе семантического CSS-минимизатора WebGrease. Основная информация о WebGrease Разработчик: компания MSN (подразделение Microsoft) Сайт: Написан на:.NET Особенности: 1. Создан на базе CSS-минимизатора Microsoft Ajax Minifier. 2. Также, как и CSSO, производит структурную минимизацию кода. 3. Текущая версия все еще содержит ошибки.

25 Модули-трансляторы

26 Bundle Transformer: Sass and SCSS Содержит адаптер-транслятор SassAndScssTranslator, производящий трансляцию Sass- и SCSS-кода в CSS. Создан на основе исходного кода.NET- библиотеки SassAndCoffee.Ruby ( Основная информация о компиляторе Sass Разработчики: Nathan Weizenbaum, Chris Eppstein, Hampton Catlin Сайт: Изначально написан на: Ruby Особенности: 1. Поддерживает 2 типа синтаксиса динамических таблиц стилей: Sass и SCSS. 2. Sass имеет Haml-подобный синтаксис. 3. SCSS является надмножеством CSS. Любой CSS-код является валидным SCSS-кодом. 4.Позволяет использовать при написании таблиц стилей: переменные, вложенные селекторы, примеси, наследование селекторов и т.д.

27 Bundle Transformer: LESS Содержит адаптер-транслятор LessTranslator, который транслирует LESS-код в CSS, средствами.NET-библиотеки dotless ( Основная информация о компиляторе LESS Разработчик: Alexis Sellier Сайт: Изначально написан на: JavaScript (Node.js, Rhino и браузер) Особенности: 1. LESS является надмножеством CSS. Любой CSS-код является валидным LESS-кодом. 2.Позволяет использовать при написании таблиц стилей: переменные, вложенные селекторы, примеси, операции (сложение, вычитание, умножение и деление), функции (математические и цветовые), пространства имен и т.д.

28 Bundle Transformer: LESS Lite Содержит адаптер-транслятор LessTranslator, который транслирует LESS-код в CSS, средствами.NET-библиотеки DotlessClientOnly ( Особенности реализации 1.Использует для компиляции LESS-кода более легковесную библиотеку (содержит только компилятор). 2.С точки зрения Bundle Transformer функционал BundleTransformer.LessLite полностью эквивалентен BundleTransformer.Less.

29 Bundle Transformer: CoffeeScript Содержит адаптер-транслятор CoffeeScriptTranslator, производящий трансляцию CoffeeScript-кода в JavaScript: Основная информация о компиляторе CoffeeScript Разработчик: Jeremy Ashkenas Сайт: Написан на: JavaScript (Node.js и браузер) Особенности: 1. CoffeeScript добавляет синтаксический сахар в стиле Ruby, Python и Haskell, что позволяет улучшить читаемость кода и уменьшить его размер. 2. Поддерживает классы и наследование.

30 Bundle Transformer: TypeScript Содержит адаптер-транслятор TypeScriptTranslator, производящий трансляцию TypeScript-кода в JavaScript: Основная информация о компиляторе TypeScript Разработчик: компания Microsoft (Anders Hejlsberg) Сайт: Написан на: JavaScript (Node.js и браузер) Особенности: 1. TypeScript является надмножеством JavaScript. Любой JavaScript-код является валидным TypeScript-кодом. Если CoffeeScript можно назвать скриптовым Sass, то TypeScript – это скриптовый LESS. 2. Поддерживает статическую типизацию. 3. Поддерживает интерфейсы, классы и модули.

31 Подключение модулей

32 Декларативное подключение Декларативное подключение модулей производится с помощью файла Web.config : … … … … …

33 Императивное подключение Императивное подключение модулей производится при создании bundle`ов в файле _AppStart.cshtml :

34 Демонстрационный сайт

35 Пример сайта ASP.NET Web Pages По адресу можно скачать архив с примером сайта ASP.NET Web Pages, использующего Bundle Transformer (установлены все модули, кроме BundleTransformer.WG):

36 Ссылки – страница проекта Bundle Transformer на CodePlex страница проекта MSIE JS Engine (использую для запуска под.NET кода следующих JS-библиотек: Packer, UglifyJS, CoffeeScript и TypeScript) на GitHub – мой блог – страница проекта Microsoft ASP.NET Web Optimization Framework на CodePlex учебник по Microsoft ASP.NET Web Optimization Framework блог Howard Dierking (руководитель проекта Web Optimization) сайт среды разработки WebMatrix материалы по ASP.NET Web Pages

37 Спасибо за внимание! АНДРЕЙ ТАРИЦЫН Сайт: Twitter: