「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>ASP.NET]]

* 目次 [#zf55c12b]
#contents

*概要 [#q49e8f85]
CSSやJavaScriptなど複数ファイルを、
-一つのファイルにまとめる機能(Bundle)
-空白や不要な文字を削除してファイルサイズを小さくする機能(Minification)

*初期設定 [#db21fa11]
以下をインストールする。

 Install-Package Microsoft.AspNet.Web.Optimization

*機能と設定 [#j578a062]
[[ASP.NET Web Forms]]と[[ASP.NET MVC]]で機能が若干異なるもよう。

詳しくは下記を参照。
-[[ASP.NET Web Forms の Modernization]]
-[[ASP.NET MVC の Modernization]]

**Bundle & Minification [#pd6e6080]
***機能概要 [#e02521af]
CSSやJavaScriptなど複数ファイルを、
-一つのファイルにまとめる機能(Bundle)
-空白や不要な文字を削除してファイルサイズを小さくする機能(Minification)

を使用するには、BundleConfigファイルへの定義が必要になる。

***定義方法 [#m4cddf8c]
基本的に、以下のステートメントを使用して定義を行う。

 public static void RegisterBundles(BundleCollection bundles)
 {
     // ( new ScriptBundle("~/XXXX") のパスは実在するpathと被るとRender時にバグる。
     // なので、bundlesと実在しないpathを指定している(CSSも同じbundlesを使用する)。
 
     bundles.Add(
       new ScriptBundle("~/バンドルしたファイルの仮想バス").Include(
           "~/バンドルするファイルの仮想パス 1",
           "~/バンドルするファイルの仮想パス 2",
           "~/バンドルするファイルの仮想パス 3",
           ・・・);

定義方法は、[[ASP.NET Web Forms]]と[[ASP.NET MVC]]で若干異なるもよう。

-JSの設定
--[[ASP.NET Web Forms]]では、ScriptBundleクラスとScriptManagerクラスを併用する。
--[[ASP.NET MVC]]では、ScriptBundleクラスを使用する。

-CSSの設定
--[[ASP.NET Web Forms]]では、Bundle.configを使用する。
--[[ASP.NET MVC]]では、ScriptBundleクラスではなく、StyleBundleクラスを使用する。

詳しくは下記を参照。
-[[ASP.NET Web Forms の Modernization]]
-[[ASP.NET MVC の Modernization]]

**CDNフォールバック [#jfd7be89]
**[[CDN>CDN(Content Delivery Network)]]フォールバック [#jfd7be89]
***機能概要 [#m94bf6d8]
Webには色々なフォールバックがあるが、

-効果的なフォールバック戦略の作成方法~
https://msdn.microsoft.com/ja-jp/library/hh273396.aspx

このうち、BundleConfigでは、CDNフォールバックの機能を提供している。
このうち、BundleConfigでは、[[CDN>CDN(Content Delivery Network)]]フォールバックの機能を提供している。

CDNフォールバックには以下の様なメリットがある。
-そのライブラリを、CDN経由の高速配信で受け取ることができる。
[[CDN>CDN(Content Delivery Network)]]フォールバックには以下の様なメリットがある。
-そのライブラリを、[[CDN>CDN(Content Delivery Network)]]経由の高速配信で受け取ることができる。
-他のサイトで同じファイルを使用する場合は、キャッシュを共有できる。
-ライブラリ・ファイルを準備せずにコードを書き始めることができ。

***定義方法 [#lb7b88d4]
こちらも、[[ASP.NET Web Forms]]と[[ASP.NET MVC]]で機能が若干異なるもよう。

詳しくは下記を参照。
-[[ASP.NET Web Forms の Modernization]]
-[[ASP.NET MVC の Modernization]]

**有効・無効の制御 [#h13b6752]

***[[Web.config>.NET config#u3d1af27]]で設定 [#kb77fea9]
デバッグの設定の場合は「無効」になっている。

[[Web.config>.NET config#u3d1af27]]のcompilation要素のdebug属性がtrueの場合、無効になる。

 <compilation debug="true" targetFramework="4.5.2" />

***プロムラムから設定 [#w71ddcc0]
プロムラムから明確に有効・無効を制御できる。

BundleConfig に有効・無効を記述する。

 BundleTable.EnableOptimizations = true;
 BundleTable.Bundles.UseCdn = true; // 後述のCDNフォールバック有効・無効

*リンクのさせ方 [#xe719b10]
こちらも、[[ASP.NET Web Forms]]と[[ASP.NET MVC]]で機能が若干異なるもよう。

詳しくは下記を参照。
-[[ASP.NET Web Forms の Modernization]]
-[[ASP.NET MVC の Modernization]]

*参考 [#of22ed28]
-特集:ASP.NET 4.5新機能概説(1):Visual Studio 2012の新機能とASP.NET 4.5のコア機能 (3/4) - @IT~
http://www.atmarkit.co.jp/ait/articles/1303/08/news072_3.html
-【ASP.NET MVC】BundleConfigを3点ほど勘違いしていたのでまとめ - modest violet~
http://shin21.hatenablog.com/entry/2016/08/10/100000

-Bundling and Minification | The ASP.NET Site~
https://www.asp.net/mvc/overview/performance/bundling-and-minification

----
Tags: [[:.NET開発]], [[:ASP.NET]], [[ASP.NET Web Forms]], [[:ASP.NET MVC]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS