- PVSM.RU - https://www.pvsm.ru -
Представляю вашему вниманию перевод статьи Рика Андерсона (Rick Anderson) «Adding Web Optimization to a Web Pages Site» [1].
При добавлении ASP.NET Bundling and Minification (далее B/M) на сайт ASP.NET Web Pages мы следуем тому же рецепту, что и в ASP.NET MVC и Web Forms:
Данная статья описывает базовые принципы использования B/M на сайте ASP.NET Web Pages. Для получения общей и более подробной информацией о B/M смотрите мой учебник по Bundling and Minification [2]. Вы также можете прочитать об использовании B/M c ASP.NET MVC — здесь [2], а c ASP.NET Web Forms — здесь [3].
Для начала мы создадим новый сайт ASP.NET Web Pages.
Затем откроем файл _AppStart.cshtml
:
И заменим его содержимое следующим кодом:
@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 [5] (код, помеченный комментариями).
Примечание переводчика. Если быть более точным, то поддержка CDN появилась в Microsoft ASP.NET Web Optimization Framework 1.0.0 RTM [6], который написан под .NET Framework 4.0 и, соответственно, не требует для своей работы .NET 4.5.
Откроем мастер-страницу (файл _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>
Автор: Taritsyn
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/net/14548
Ссылки в тексте:
[1] «Adding Web Optimization to a Web Pages Site»: http://blogs.msdn.com/b/rickandy/archive/2012/08/15/adding-web-optimization-to-a-web-pages-site.aspx
[2] учебник по Bundling and Minification: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
[3] здесь: http://habrahabr.ru/post/150863/
[4] Image: http://taritsyn.files.wordpress.com/2012/09/creating_new_asp_net_web_pages_site.png
[5] CDN: http://blogs.msdn.com/b/rickandy/archive/2011/05/21/using-cdns-to-improve-web-site-performance.aspx
[6] Microsoft ASP.NET Web Optimization Framework 1.0.0 RTM: http://nuget.org/packages/Microsoft.AspNet.Web.Optimization/1.0.0
Нажмите здесь для печати.