asp.net-mvc
束縛と小型化

細分化

縮小は、CSSやJavascriptファイルのサイズを減らしてダウンロード時間を短縮するために使用されます。このプロセスは、不要な空白、コメント、およびその他の重要でないコンテンツをすべてファイルから削除することによって実行されます。

この処理は、 ScriptBundleまたはStyleBundleオブジェクトを使用するときに自動的に行われます。これを無効にする必要がある場合は、基本Bundleオブジェクトを使用する必要があります。

ミニ化を使用した例

次のコードでは、プリプロセッサディレクティブを使用してリリース間だけのバンドルを適用し、非リリース時のデバッグを容易にしています（バンドルされていないファイルは通常ナビゲートが簡単です）。

public static void RegisterBundles(BundleCollection bundles)  
{  
    #if DEBUG
        bundles.Add(new Bundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new Bundle("~/Content/css").Include("~/Content/site.css"));  
    #else
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  
    #endif
}

スクリプトとスタイルバンドル

以下は、BundleConfig.csファイルのデフォルトコードスニペットです。

using System.Web.Optimization;

public class BundleConfig  
{  
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725  
    public static void RegisterBundles(BundleCollection bundles)  
    {  
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
                    "~/Scripts/jquery-{version}.js"));  
                    
    // Use the development version of Modernizr to develop with and learn from. Then, when you're  
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.  
    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",  
    }  
 } 

バンドルは、Application_Start（）メソッド内のGlobal.asaxファイルに登録されています。

using System.Web.Optimization;

protected void Application_Start() 
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

バンドルはビューでレンダリングする必要があります。

@using System.Web.Optimization

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/themes/base/css") 

開発モード（Web.configファイルのコンパイル要素がdebug = "true"に設定されている）では、バンドルは発生しません。その代わりに、ビュー内のRenderステートメントには、個々のファイルがバンドルされていない、ミニマムでない形式で含まれているため、デバッグが容易です。

アプリケーションが運用モードになると（Web.configファイルのコンパイル要素がdebug = "false"に設定されている）、バンドルが行われます。

これは、Twitter Bootstrapのアイコンファイルへの参照など、他のファイルの相対パスを参照するスクリプトの複雑さにつながります。これは、System.Web.OptimizationのCssRewriteUrlTransformクラスを使用して解決できます。

 bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

CssRewriteUrlTransformクラスはバンドルされたファイル内の相対URLを絶対パスに書き換えるため、参照がバンドルの場所に移動された後も参照はそのまま残ります（例： "〜/ Content / css / bootstrap.css "を"〜/ bundles / css / bootstrap.css "に変更します）。