Комбинирование и уменьшение размеров клиентских ресурсов
Возможность пакетирования – это возможность, которая начала поставляться вместе с MVC 4. Вы можете пакетировать CSS и JavaScript файлы, а также минифицировать их.
Пакетирование дает вам возможность соединять многие CSS файлы и JavaScript файлы вместе в единый файл на стороне сервера. Это позволяет веб-браузерам для загрузки файла открывать единичный HTTP запрос вместо множества запросов открытия составных индивидуальных файлов. Эта возможность может внести значительное улучшение в тот момент, когда он принимает страницу для загрузки в веб-браузер. Конечным результатом является тот факт, что посетители веб-сайта будут быстрее загружать страницы.
Второй аспект пакетирования – минификация всех объединенных файлов. Этот процесс минификации включает в себя удаление пробелов и комментариев из файлов для того, чтобы уменьшить их размер таким образом, чтобы веб-браузеры могли загружать их быстрее.
Для того чтобы начать использовать механизм пакетирования, вы можете добавить вспомогательный метод в ваш код запуска с целью регистрации используемых по умолчанию пакетов JavaScript и CSS.
В следующем листинге демонстрируется пример того, как JavaScript референсы в релизе MVC 4 были сделаны более важными.
Листинг 23-1: Существующие теги script
<html>
<head>
...
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
type="text/javascript"></script>
</head>
<body>Новый эквивалентный код для включения всех JavaScript файлов вызывается, как это показано ниже, из шаблона Razor:
<script src="@BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")">
</script>Код в предыдущем фрагменте демонстрирует, что теги составного скрипта могут быть удалены из представления, что означает, что только единичный скрипт (пакет составных скриптов) будет отправлен веб-браузеру. Метод ResolveBundleUrl выполняет нечто интересное. Он отображает ссылку на новый, виртуальный URL и создает уникальный параметр в строке запроса, который позволяет веб-браузеру поместить пакет в кэш. Этот URL параметр будет изменяться всякий раз, когда на сервере будет изменяться любой файл пакета. Это дает возможность URL скриптов всегда отображать ссылку на самый последний пакет, все еще поддерживая при этом кэширование в тех случаях, когда пакетированный контент не изменяется. Ссылка, поддерживающая версионность, с уникальным параметром продемонстрирована ниже:
<script src="/Scripts/js?v=GP89PKpk2iEmdQxZTRyBnKWSLjO7XdNG4QC1rv6LPxw1">
</script>Чтобы включить в существующем приложении пакеты по умолчанию, вам необходимо добавить вызов RegisterTemplateBundles в объект BundleTable, так как это показано ниже:
BundleTable.Bundles.RegisterTemplateBundles();Это создаст используемый по умолчанию пакет JavaScript и CSS. Он автоматически добавляется в новые MVC проекты.
Добавление файлов в используемый по умолчанию пакет – довольно простая процедура. Для JavaScript файлов выполните копирование физического JavaScript файла в папку /Scripts вашего проекта. Используемая по умолчанию папка /Scripts продемонстрирована на рисунке 23-9; используемый по умолчанию пакет соберет в ней все файлы. С CSS файлами все тоже самое; добавьте CSS файлы в используемый по умолчанию пакет, скопируйте ваши CSS файлы в папку /Content, и используемый по умолчанию пакет соединит их вместе.
Рисунок 23-9: Указатели скриптов в используемом по умолчанию MVC шаблоне
