Объединение и минификация статических ресурсов в ASP.NET Core

Авторы: Скотт Адди (Scott Addie) и Дэвид Пайн (David Pine)

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

Что такое объединение и минификация

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

Объединение и минификация в первую очередь ускоряют загрузку первой страницы. После запроса веб-страницы браузер кэширует статические ресурсы (JavaScript, CSS и изображения). Следовательно, объединение и минификация не улучшают производительность при запросе одной и той же страницы или страниц на одном сайте, запрашивающем одни и те же ресурсы. Если срок действия заголовка не задано правильно для ресурсов, а если объединение и минификации не используются, то эвристики свежести браузера помечают устаревшие ресурсы через несколько дней. Кроме того, браузер требует запрос проверки для каждого ресурса. В этом случае объединение и минификация обеспечивают повышение производительности даже после запроса первой страницы.

Объединение

Объединение позволяет объединить несколько файлов в один файл. Объединение сокращает количество запросов к серверу, необходимых для преобразования веб-ресурса, например веб-страницы для просмотра. Можно создать любое количество отдельных пакетов специально для CSS, JavaScript и т. д. Меньше файлов означает меньше HTTP-запросов из браузера на сервер или из службы, предоставляющей приложение. Это приводит к повышению производительности загрузки первой страницы.

Минификация

Минификация удаляет из кода ненужные символы, не затрагивая его функциональность. В результате значительно уменьшается размер запрашиваемых ресурсов (например, CSS, изображений и файлов JavaScript). К обычным побочным эффектам минификации относятся сокращение имен переменных до одного символа и удаление комментариев и ненужных пробелов.

Рассмотрим следующую функцию JavaScript:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Минификация сокращает функцию до следующего:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Помимо удаления комментариев и ненужных пробелов, были переименованы следующие имена параметров и переменных:

Исходная	Переименовано
imageTagAndImageID	t
imageContext	a
imageElement	r

Влияние объединения и минификации

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

Действие	Без О/М	С О/М	Сокращение
Запросы файлов	18	7	61 %
Переданные байты (КБ)	265	156	41 %
Время загрузки (мс)	2360	885	63 %

Время загрузки улучшилось, но в этом примере выполнялось локально. Значительное повышение производительности достигается при использовании объединения и минификации в отношении ресурсов, передаваемых по сети.

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

Выбор стратегии объединения и минификации

Платформа ASP.NET Core совместима с WebOptimizer, решением с открытым кодом для объединения и минификации. Инструкции по настройке и примеры проектов см. на странице, посвященной WebOptimizer. В ASP.NET Core нет собственного решения для объединения и минификации.

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

Объединение и минификация на основе среды

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

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

Следующий тег environment отображает необработанные файлы CSS при выполнении в среде Development:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Следующий тег environment отображает объединенные и минифицированные файлы CSS при выполнении в среде, отличной от Development. Например, выполнение в Production или Staging запускает визуализацию этих таблиц стилей:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Дополнительные ресурсы

• Использование нескольких сред
• Вспомогательные функции тегов