Пакетирование и минификация файлов в ASP.NET MVC

| Пятница, 15 февраля, 2013

Метки: ASP.NET MVC, Bundling, Minifying Комментарии: 0

Пакетирование и минификация (bundling and minifying) в ASP.NET открывают новые возможности для оптимизации веб-сайтов и помогают экономить трафик. Как и другие способы улучшения производительности пакетирование и минификация не идеальны и имеют свои ограничения. В данной статье мы покажем как это работает в ASP.NET MVC.

Что такое пакетирование и минификация?

Пакетирование помогает скачивать странице сайта файлы одного типа одним запросом, вместо того, чтобы скачивать каждый файл по отдельности. Используя меньше запросов страницы скачивают файлы стилей и скриптов. Минификация делает файлы меньше по размеру, удалая например пробелы.

Вместе оба приема уменьшают количество запросов и байтов при открытии страницы браузером.

Как пакетирование и минификация работают в ASP.NET MVC?

В приложениях ASP.NET MVC 4 в директории App_Start находится файл BundleConfig.cs. Этот файл содержит класс BundleConfig, который имеет только один метод – RegisterBundles(). В этом методе скачиваемые файлы объединяются в пакеты.

public static void RegisterBundles(BundleCollection bundles)
{
   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

   bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                 "~/Scripts/jquery-ui-{version}.js"));

   bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                 "~/Scripts/jquery.unobtrusive*",
                 "~/Scripts/jquery.validate*"));

   bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                 "~/Scripts/modernizr-*"));

   bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                 "~/Content/themes/base/jquery.ui.core.css",
                 "~/Content/themes/base/jquery.ui.resizable.css",
                 "~/Content/themes/base/jquery.ui.selectable.css",
                 "~/Content/themes/base/jquery.ui.accordion.css",
                 "~/Content/themes/base/jquery.ui.autocomplete.css",
                 "~/Content/themes/base/jquery.ui.button.css",
                 "~/Content/themes/base/jquery.ui.dialog.css",
                 "~/Content/themes/base/jquery.ui.slider.css",
                 "~/Content/themes/base/jquery.ui.tabs.css",
                 "~/Content/themes/base/jquery.ui.datepicker.css",
                 "~/Content/themes/base/jquery.ui.progressbar.css",
                 "~/Content/themes/base/jquery.ui.theme.css"));

}

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

• ~/bundles/jquery
• ~/bundles/jqueryui
• ~/bundles/jqueryval
• ~/bundles/modernizr
• ~/Content/css
• ~/Content/themes/base/css

Если внимательно посмотреть на определения файлов, то видно, что можно не только задавать имя файла, но и путь к нему. Специальное поле для подстановки {version} в имени файла означает, что имя может содержать номер версии. Этот шаблон особенно удобен для jQuery, так как данная библиотека часто обновляется. Когда обновляются файлы jQuery, новые файлы содержат новые номера версии. И так как файлы различаются только номерами версий, для обновленных файлов пакет будет создаваться без проблем без дополнительных действий со стороны разработчика.

Необходимо запомнить, что в режиме отладки пакетирование отключено по умолчанию. Для его включения нужно добавить в начале метода RegisterBundles():

BundleTable.EnableOptimizations = true;

Откроем представление _Layout.cshtml , и посмотрим, как подключаются пакеты:

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 

Хотя зарегистрировано пакетов больше, подключены только те, которые действительно необходимы.

Классы ScriptBundle and StyleBundle

Как видно в примере выше, пакеты скриптов и пакеты стилей создаются с помощью разных классов. Класс ScriptBundle предназначен для файлов скриптов, файлы других типов не нужно туда добавлять. То же самое можно сказать про класс StyleBundle. Оба этих класса наследуются от общего класса Bundle.

Минификация работает довольно хитро. Классы пакетирования сами не выполняют оптимизацию файлов. Все, что они делают, это добавляют нужный минификатор в свои коллекции преобразования. Существуют два класса минификации, которые находятся в пространстве имен System.Web.Optimization:

• JsMinify
• CssMinify

Именно эти классы делают всю работу по уменьшению файлов. Любой разработчик может написать свою реализацию минификатора. И если сохранен тот же стиль, как и во встроенных классах, то объекту пакетирования можно указать свой минификатор.

Отключение минификации

Случается, что CssMinify не может обработать некоторые файлы. В случае таких проблем объекты пакетирования пишут комментарии в обрабатываемые файлы. Эти отчеты создаются в начале файлов. Поэтому нужно иметь возможность отключать минификацию, но в то же время функции пакетирования должны работать.

Есть два способа сделать это:

• Использовать класс Bundle. Класс Bundle, от которого наследуются другие классы пакетирования не является абстрактным. Можно создать его объект. И таким способом можно объединить в пакет любые файлы.
• Очистить коллекцию преобразований класса StyleBundle. Это то же самое, что и использовать класс Bundle с пустой коллекцией преобразований.

Советы и рекомендации

Приведем несколько подсказок, касающихся работы пакетирования.

• Пакеты кешируются. Если не задано обратное, то при первом создании пакета он кешируется на сервере. Все последующие запросы обслуживаются и кеша.
• Всегда тестируйте создание пакетов. Пакетирование может казаться беспроблемным. Вы просто включаете его при развертывании сайта. Но не забываете о классах преобразования. Эти классы могут не обработать некоторые файлы. Перед запуском сайта убедитесь, что пакетирование и минификация работает корректно.
• Будьте осторожны со стилями. Создавая пакеты из файлов стилей следите за тем, чтобы путь пакета имел ту же глубину папок, что и путь к исходным файлам стилей. Если файл стиля использует относительные ссылки на картинки, то после создания пакета эти ссылки перестанут работать.

Итак, пакетирование и минификация - полезные приемы для оптимизации загрузки веб-страниц. Пакеты просты в использовании и позволяют расширять свои возможности. Почти все шаблоны ASP.NET MVC используют пакетирование. Благодаря простому и гибкому API можно держать под контролем все нюансы создания пакетов файлов. Есть возможность создавать собственные типы пакетов и определять преобразования файлов с собственной реализацией.