Бандлы и минификация

Введение в бандлы и минификацию

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

В 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.7.1.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.7.1.js")" type="text/javascript"></script>
    <title>Index</title>
</head>

Использование бандлов представляет совсем другой подход к использованию скриптов и стилей. При создании нового проекта MVC4 по шаблону Basic или Internet Application функциональность бандлов уже по умолчанию включается в приложение. Если вы посмотрите на стандартный код мастер-страницы _Layout.cshtml, то увидите совсем иной способ подключения скриптов и стилей:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

В данном случае подключаются не конкретные скрипты и стили, а именно бандлы. С помощью хелпера Styles.Render подключаются бандлы стилей, а с помощью хелпера Scripts.Render. Эти хелперы принимают в качестве параметра имя бандла.

По умолчанию проекты MVC4 (исключая проекты Empty) уже содержат регистрацию бандлов - в файле BundleConfig.cs, который находится в папке App_Start:

using System.Web;
using System.Web.Optimization;

namespace Guestbook
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        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"));
        }
    }
}

Здесь метод 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" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    @RenderSection("scripts", required: false)
</body>
</html>

В данном случае я подключаю пять бандлов. Если запустить теперь приложение, то через средства разработчика в IE10 я могу увидеть скрипты, которые несут бандлы:

В данном случае у нас по умолчанию приложение находится в режиме отладки. В файле web.config можно найти следующую секцию:

<configuration>
  <!--------------------------------------->
  <system.web>
    <httpRuntime targetFramework="4.5" />
    <compilation debug="true" targetFramework="4.5" />
  <!--------------------------------------->

Параметр debug="true" указывает, что приложение запускается в режиме отладки. Теперь изменим его значение на false: debug="false" и перезапустим проект. Теперь мы увидим несколько иной результат:

И если вы посмотрите, например, в том же IE10 в средствах разработчика заголовки ответа, то вы увидите, что в этот раз в режиме развертывания сервер отдает нам минимизированный файл:

Таким образом, использование бандлов в проектах MVC4 повышает эффективность веб-приложения.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850