Статьи

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

Октябрь 3, 2018

Объединение и минимизация в ASP.NET — это мощная функция, которая помогает оптимизировать веб-сайты и сэкономить некоторые расходы на трафик. Как и любой другой механизм в этом мире, связывание и минимизация не являются серебряной пулей и имеют свои ограничения. В этой публикации я покажу вам, как работает пакетирование и минимизация в ASP.NET MVC.

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

Пакетирование помогает вам загружать файлы одного типа, используя один запрос вместо нескольких запросов. Таким образом, вы можете загружать стили и скрипты, используя меньше запросов, чем требуется для запроса всех файлов отдельно. Сокращение помогает уменьшить файлы, удаляя ненужные пробелы.

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

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

В веб-приложении ASP.NET MVC 4 вы можете найти файл BundleConfig.cs в папке App_Start. Этот файл содержит класс 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*"));
 
    // Use the development version of Modernizr to develop with and learn from.
    // Then, when you're ready for production, use the build tool at 
    //http://modernizr.com to pick only the tests you need.
    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"));
}

Здесь все файлы в каждом пакете объединяются и загружаются как один файл. Это означает, что этот метод определяет следующие URL-адреса для загрузки файлов:

  • ~ / Пучки / JQuery
  • ~ / Пучки / jqueryui
  • ~ / Пучки / jqueryval
  • ~ / Пучки / Modernizr
  • ~ / Content / CSS
  • ~ / Содержание / темы / база / CSS

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

NB! В режиме отладки связывание по умолчанию отключено. Для принудительного связывания в режиме отладки добавьте следующую строку в начало метода RegisterBundles ():

BundleTable.EnableOptimizations = true;

Если вы откроете представление _Layout.cs своего приложения, вы увидите, как наборы стилей и скриптов включаются в страницу:

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery")
Хотя у нас определено больше пакетов, они предназначены для использования со страницами, где они действительно необходимы.

ScriptBundle и StyleBundle

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

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

Это классы, которые делают реальную работу. Таким же образом каждый может написать минификацию, преобразующую свои потребности, и если желательно сохранить тот же стиль, что и у встроенных комплектов, то можно создать новый класс комплектов, который добавляет настраиваемый минификатор для преобразования комплектов при создании нового комплекта.

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

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

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

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

Советы и приемы

Вот несколько советов и рекомендаций по комплектации.

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

Вывод

Объединение и минимизация — это мощная функция, которая помогает нам оптимизировать наши веб-страницы. Пакеты просты в использовании, и они поддерживаются «из коробки». Фактически почти все шаблоны ASP.NET MVC используют пакеты. Благодаря простому и гибкому API мы можем контролировать практически все аспекты пакетирования. Также мы можем создавать наши собственные типы пакетов и определять собственные преобразования, которые применяются к файлам в пакетах. Хотя пакетирование очень хорошее, оно имеет свои ограничения и приемы, которые вы должны знать, чтобы успешно их использовать. Хорошо, что есть только несколько вещей, которые могут пойти не так.

36
Share: