Главная > .NET, JavaScript > Добавляем Bundling and Minification на сайт ASP.NET Web Pages (Перевод)

Добавляем Bundling and Minification на сайт ASP.NET Web Pages (Перевод)

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

При добавлении ASP.NET Bundling and Minification (далее B/M) на сайт ASP.NET Web Pages мы следуем тому же рецепту, что и в ASP.NET MVC и Web Forms:

  1. Объявляем и регистрируем Bundle`ы;
  2. Используем Bundle`ы в коде наших представлений.

Данная статья описывает базовые принципы использования B/M на сайте ASP.NET Web Pages. Для получения общей и более подробной информацией о B/M смотрите мой учебник по Bundling and Minification. Вы также можете прочитать об использовании B/M c ASP.NET MVC — здесь, и c ASP.NET Web Forms — здесь.

Для начала мы создадим новый сайт ASP.NET Web Pages.

Создание сайта ASP.NET Web Pages в Visual Studio 2012

Затем откроем файл _AppStart.cshtml:

Файл _AppStart.cshtml в окне Solution Explorer Visual Studio 2012

И заменим его содержимое следующим кодом:

@using System.Web.Optimization;

@{
    var bundles = BundleTable.Bundles;     
    bundles.UseCdn = true; // включаем поддержку CDN

    // добавляем ссылку на файл библиотеки jQuery, размещенный на CDN
    var jqueryCdnPath = 
        "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

    bundles.Add(new ScriptBundle("~/bundles/jquery", 
        jqueryCdnPath).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/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"));
}

Новинкой в Microsoft ASP.NET Web Optimization Framework (одно из названий B/M) для .NET 4.5 RTM стала поддержка CDN (код, выделенный жирным шрифтом).

Примечание переводчика. Если быть более точным, то поддержка CDN появилась в Microsoft ASP.NET Web Optimization Framework 1.0.0 RTM, который написан под .NET Framework 4.0 и, соответственно, не требует для своей работы .NET 4.5.

Использование Bundle`ов

Откроем мастер-страницу (файл _SiteLayout.cshtml) и в элементе <head> заменим теги script и стилевые теги link ссылками на Bundle`ы. Оригинальный код приведен ниже:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title - My ASP.NET Web Page</title>
        <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" 
            type="text/css" />
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script src="~/Scripts/jquery-1.7.1.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
        <script src="~/Scripts/modernizr-2.5.3.js"></script>
        <meta name="viewport" content="width=device-width" />
    </head>

А теперь посмотрим обновленный код:

@using System.Web.Optimization;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title - My ASP.NET Web Page</title>

        @Styles.Render("~/Content/themes/base/css", "~/Content/css")

        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        @Scripts.Render("~/bundles/jquery",
            "~/bundles/jqueryui",
            "~/bundles/modernizr")

        <meta name="viewport" content="width=device-width" />
    </head>

После внесенных изменений, CSS- и JavaScript-код может быть доставлен в виде Bundle`ов. Ссылки на Bundle`ы добавляются в представления с помощью метода Render (Styles.Render используется для CSS, а Scripts.Render для JavaScript).

В конфигурации по умолчанию для Web Pages значение атрибута debug конфигурационного элемента compilation равно true. Когда атрибут debug равен true, то не происходит ни объединения, ни минимизации кода. Откроем файл Web.config и в элементе compilation изменим значение атрибута debug на false, как показано ниже:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.web>
        <compilation debug="false" targetFramework="4.0" />
    </system.web>
    <!-- Остальные элементы были удалены для большей наглядности -->
</configuration>
Реклама
  1. Комментариев нет.
  1. No trackbacks yet.

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

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

Логотип WordPress.com

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

Фотография Twitter

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

Фотография Facebook

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

Google+ photo

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

Connecting to %s

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