Главная > .NET, JavaScript > Добавляем Bundling and Minification в приложение ASP.NET Web Forms (Перевод)

Добавляем Bundling and Minification в приложение ASP.NET Web Forms (Перевод)

Представляю вашему вниманию перевод статьи Рика Андерсона (Rick Anderson) «Adding Bundling and Minification to Web Forms».

Мой учебник по Bundling and Minification обеспечивает хорошее введение в возможности и основные преимущества ASP.NET Bundling and Minification (далее B/M). Вы должны прочитать это руководство, чтобы ознакомиться с основными возможностями данного продукта. В отличие, от моего руководства по B/M, которое посвящено использованию B/M в ASP.NET MVC, эта статья будет посвящена использованию B/M в связке с ASP.NET Web Forms.

Примечание переводчика. ASP.NET Bundling and Minification также известен под другими названиями: Microsoft ASP.NET Web Optimization Framework, System.Web.Optimization, Microsoft.Web.Optimization и ASP.NET Optimization – Bundling.

Создайте новое приложение ASP.NET Web Forms, ориентированное на .NET Framework 4.5.

Создание проекта ASP.NET Web Forms 4.5

Запустите приложение и в открывшемся окне Internet Explorer запустите F12 Developer Tools. Перейдите на вкладку Script, а затем в списке ресурсов воспользуйтесь кнопками для просмотра JavaScript-файлов.

Вкладка Script F12 Developer Tools

Вы можете выбрать один из JavaScript-файлов и увидеть его содержимое в левой панели. Обратите внимание, что используются полные (не минимизированные) версии файлов.

Создание jQuery-bundle`ов

Добавьте jQuery, jQuery UI и jQuery Validation в класс BundleConfig, который находится в директории App_Start. Следующий код показывает окончательную версию класса:

using System.Web.Optimization;

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/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
            "~/Scripts/WebForms/WebForms.js",
            "~/Scripts/WebForms/WebUIValidation.js",
            "~/Scripts/WebForms/MenuStandards.js",
            "~/Scripts/WebForms/Focus.js",
            "~/Scripts/WebForms/GridView.js",
            "~/Scripts/WebForms/DetailsView.js",
            "~/Scripts/WebForms/TreeView.js",
            "~/Scripts/WebForms/WebParts.js"));

        bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
            "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));
    }
}

Регистрация Bundle`ов

Шаблоны веб-приложений Visual Studio автоматически создают код, который осуществляет регистрацию Bundle`ов в методе Application_Start файла Global.asax:

void Application_Start(object sender, EventArgs e)
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    AuthConfig.RegisterOpenAuth();
}

Добавление ссылок на Bundle`ы

Добавьте jQuery-bundle`ы в элемент управления <asp:PlaceHolder />, как показано в следующем коде:

<asp:PlaceHolder runat="server">        
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/bundles/jquery") %>
    <%: Scripts.Render("~/bundles/jqueryui") %>
</asp:PlaceHolder>

В элементе управления ScriptManager закомментируйте ссылки на jQuery-скрипты, как показано ниже:

<body>
    <form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--        
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            --%>
        </Scripts>
    </asp:ScriptManager>
    <header>

CSS-bundle`ы

Изучите файл Bundle.config, который содержит код для создания CSS-bundle`ов (стилевых Bundle`ов).

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
    <styleBundle path="~/Content/css">
        <include path="~/Content/Site.css" />
    </styleBundle>
    <styleBundle path="~/Content/themes/base/css">
        <include path="~/Content/themes/base/jquery.ui.core.css" />
        <include path="~/Content/themes/base/jquery.ui.resizable.css" />
        <include path="~/Content/themes/base/jquery.ui.selectable.css" />
        <include path="~/Content/themes/base/jquery.ui.accordion.css" />
        <include path="~/Content/themes/base/jquery.ui.autocomplete.css" />
        <include path="~/Content/themes/base/jquery.ui.button.css" />
        <include path="~/Content/themes/base/jquery.ui.dialog.css" />
        <include path="~/Content/themes/base/jquery.ui.slider.css" />
        <include path="~/Content/themes/base/jquery.ui.tabs.css" />
        <include path="~/Content/themes/base/jquery.ui.datepicker.css" />
        <include path="~/Content/themes/base/jquery.ui.progressbar.css" />
        <include path="~/Content/themes/base/jquery.ui.theme.css" />
  </styleBundle>
</bundles>

В файл Bundle.config вы можете добавить ваши собственные стилевые Bundle`ы.

Примечание переводчика. На мой взгляд, создание стилевых Bundle`ов с помощью файла Bundle.config ограничивает разработчика, т.к. пропадает возможность добавлять пользовательские трансформации Bundle`ов (классы, реализующие интерфейс IBundleTransform). Сейчас существуют целые библиотеки таких трансформаций (например, Bundle Transformer), которые позволяют транслировать LESS-, Sass-, SCSS- и CoffeeScript-код, а также использовать другие алгоритмы минимизации кода (по умолчанию в B/M используется некая модификация Microsoft Ajax Minifier). Поэтому лучше создавать стилевые bundle`ы в классе BundleConfig (также как в ASP.NET MVC). Для того чтобы настройки, указанные в классе BundleConfig, работали корректно нужно в файле Bundle.config закомментировать содержимое элемента bundles.

Следующий код показывает, как можно добавить ссылки на CSS- и JavaScript-bundle`ы в разметку ASP.NET-страницы:

<%: Styles.Render("~/Content/themes/base/css", 
    "~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery",
    "~/bundles/jqueryui") %>

Обратите внимание, что вы можете указать несколько bundle`ов в одном вызове метода Render.

Примечание переводчика. Автор ничего не упомянул об элементе управления <webopt:BundleReference />, с помощью которого также можно добавлять ссылки на стилевые Bundle`ы в разметку ASP.NET-страницы. Поскольку данный элемент управления не поддерживает добавление ссылок на скриптовые Bundle`ы и вносит путаницу, я рекомендую найти все места, где он используется, и заменить его на вызовы метода Styles.Render.

UPD: После просмотра выступления Говарда Дёркинга (Howard Dierking) «Build high-performing HTML 5 applications easily with ASP.NET 4.5», выяснилось для чего, на самом деле, нужны элемент управления <webopt:BundleReference /> и файл Bundle.config. Поскольку Bundle`ы, созданные в классе BundleConfig, становятся доступны только в режиме выполнения, то стили, указанные в них, не применяются в окне дизайнера Visual Studio (режимы отображения Design и Split). Данную проблему как раз и решают перечисленные выше средства. Похоже, что теперь придется дублировать стили и в классе BundleConfig, и в файле Bundle.config, а перед развертыванием закомментировать в файле Bundle.config содержимое элемента bundles. К сожалению, пока не понятно, что нужно делать при использовании в проекте LESS, Sass или SCSS (скорее всего, придется использовать трансляцию (компиляцию) кода во время сборки проекта или обходиться без дизайнера).

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: