Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
В ASP.NET MVC 4 была введена концепция бандлов, которая помогает организовать файлы скриптов и стилей более эффективным путем для снижения издержек при передаче клиенту. Посмотрим, что представляют собой бандлы.
В предыдущих версиях MVC мы могли стандартным образом подключать скрипты и стили, например:
<head> <meta name="viewport" content="width=device-width" /> <link type="text/css" rel="stylesheet" href="~/Content/Site.css" /> <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script> <title>Index</title> </head>
Фреймворк MVC для настройки путей предлагает нам использовать URL-хелперы:
<head> <meta name="viewport" content="width=device-width" /> <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/Site.css")" /> <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script> <title>Index</title> </head>
Использование бандлов представляет совсем другой подход к использованию скриптов и стилей. При создании нового проекта MVC 5 функциональность бандлов уже по умолчанию включается в приложение. Если вы посмотрите на стандартный код мастер-страницы _Layout.cshtml, то увидите совсем иной способ подключения скриптов и стилей:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <!-- Основное содержимое мастер-страницы --> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>
В данном случае подключаются не конкретные скрипты и стили, а именно бандлы. С помощью хелпера Styles.Render
подключаются бандлы
стилей, а с помощью хелпера Scripts.Render
подключаются бандлы скриптов. Эти хелперы принимают в качестве параметра имя бандла.
По умолчанию проекты MVC 5 уже содержат регистрацию бандлов - в файле BundleConfig.cs, который находится в папке App_Start:
using System.Web; using System.Web.Optimization; namespace BundlesApp { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); } } }
Здесь метод RegisterBundles
добавляет все создаваемые бандлы в коллекцию bundles
. Объявление бандла выглядит следующим образом:
new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")
.
В конструктор ScriptBundle
передается виртуальный путь бандла. А с помощью метода Include
уже включаются в данный бандл
конкретные файлы скриптов.
В выражении "~/Scripts/jquery-{version}.js"
параметр {version} является заменителем для любого символьного обозначения версии скрипта.
Это очень удобно, поскольку через некоторое время мы можем поменять версию библиотеки, но при этом в коде нам ничего не придется менять,
так как система уже автоматически примет новую версию.
Выражение "~/Scripts/jquery.validate*"
с помощью знака звездочки заменяет остальную часть строки. Например, это выражение
подключит в бандл сразу два файла: jquery.validate.js и jquery.validate.unobtrusive.js (и их минимизированные версии), так как
их названия начинаются с jquery.validate*"
.
То же самое касается и создания бандлов стилей, только в этом случае используется класс StyleBundle
.
Однако само объявление бандлов в файле BundleConfig.cs еще не подключает автоматически их в проект. Для этого в файле Global.asax прописывается соответствующая директива:
public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { //.............................................. BundleConfig.RegisterBundles(BundleTable.Bundles); } }
Таким образом, мы и регистрируем бандлы для нашего приложения.
Ключевым моментом концепции бандлов является минификация. Ее суть состоит в том, что при развертывании приложения клиенту отдается не полная, а минимизированная версия скриптов или стилей. За счет чего экономятся ресурсы сервера, так как идет отдача файла с меньшим объемом. В то же время в процессе отладки приложение отдает обычную версию, поскольку благодаря ей, нам проще разобраться в возможных ошибках. Посмотрим на примере. Вот у меня есть некоторая мастер-страничка, которая подключает кучу бандлов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>
В данном случае я подключаю пять бандлов. Если запустить теперь приложение, то через средства разработчика в InternetExplorer 11 я могу увидеть скрипты, которые несут бандлы:
В данном случае у нас по умолчанию приложение находится в режиме отладки. В файле web.config можно найти следующую секцию:
<configuration> <!---------------------------------------> <system.web> <authentication mode="None" /> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> <!--------------------------------------->
Параметр compilation debug="true"
указывает, что приложение запускается в режиме отладки. Теперь изменим его значение на false:
debug="false"
и перезапустим проект. Теперь мы увидим несколько иной результат:
И если вы посмотрите, например, в том же IE11 в средствах разработчика заголовки ответа, то вы увидите, что в этот раз в режиме развертывания сервер отдает нам минимизированный файл:
Таким образом, использование бандлов в приложениях на ASP.NET MVC повышает эффективность и производительность.