🏪 🐬 🤸🏽 ASP.NET Webページにバンドルと縮小を追加する 🔈 📔 👩🏾‍🤝‍👩🏽

Rick Andersonの記事「Adding Web Optimization to a Web Pages Site」の翻訳を紹介します。

ASP.NET Bundling and Minification（以降B / M）をASP.NET Webページに追加する場合、ASP.NET MVCおよびWebフォームと同じレシピに従います。

バンドルを宣言して登録します。
表現のコードでバンドルを使用します。

この記事では、ASP.NET WebページでB / Mを使用する基本原則について説明します。 B / Mの一般的で詳細な情報については、バンドルと縮小のチュートリアルを参照してください。また、ASP.NET MVC で B / Mを使用する方法、およびASP.NET Webフォームで使用する方法については、こちらを参照してください。

はじめに、新しいASP.NET Webページサイトを作成します。

Visual Studio 2012でASP.NET Webページサイトを作成する

次に、 _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")); }

.NET 4.5 RTMのMicrosoft ASP.NET Web最適化フレームワーク（B / M名の1つ）の新機能は、 CDNのサポート（コメント付きのコード）です。

翻訳者によるメモ。 より正確に言うと、CDNサポートはMicrosoft ASP.NET Web Optimization Framework 1.0.0 RTMに登場しました。これは.NET Framework 4.0で書かれているため、作業に.NET 4.5は必要ありません。

バンドルを使用する

マスターページ（ _SiteLayout.cshtml

ファイル）を開き、 <head>

要素で、 script

タグとlink

スタイルタグをバンドルへのリンクに置き換えます。元のコードは次のとおりです。

 <!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コードはバンドルの形で配信できます。バンドルへのリンクは、 Render

メソッドを使用してビューに追加されます（ Styles.Render

CSSに使用され、 Scripts.Render

JavaScriptに使用されます）。

Webページのデフォルト構成では、 compilation

構成要素のdebug

属性は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>

ASP.NET Webページにバンドルと縮小を追加する

バンドルを使用する

More articles: