ASP.NET MVC 4 捆綁和縮小執行個體介紹

在 ASP.NET MVC 4 中可捆綁多個 css 和 js 檔案以減少HTTP請求，並對 css 和 js 檔案進行壓縮（縮小），這樣可提高網站的載入速度。我們選取部落格園的 css 檔案來看看，在 ASP.NET MVC 4 前，我們引入 css 方法如下：

複製代碼 代碼如下:<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/sitehome.css" rel="stylesheet" type="text/css" />

在 IE 中使用 F12 查看結果，

在 ASP.NET MVC 4 中，使用下邊寫法引入 css 檔案：

<link href="/Content/css" rel="stylesheet" />

重新運行，結果如下：

可以清楚的看到，在 ASP.NET MVC 4 中使用新方法引入 css 時，網站運行時不僅合并了 css 檔案而且壓縮了 css 中的代碼。雙擊 css 檔案，在響應本文中可以看到：

對 js 檔案的處理方式同 css 相同，引入方法如下：

複製代碼 代碼如下:<script src="/Scripts/js"></script>

ASP.NET MVC 4 中捆綁時，css 定序為：先載入 reset.css、normalize.css，其他檔案按首字母排序，類似地 js 定序為 jquery.js、jquery-ui.js 其他檔案同樣按首字母排序。有時我們需要在不同頁面載入不同的 css 或 js 檔案，以減少不必要的檔案，下邊就讓我們看看怎麼自訂一個捆綁。

在 Global.asax.cs 檔案 Application_Start() 中添加如下代碼：

複製代碼 代碼如下://定義名為"mycss"的捆綁,js對應為 new JsMinify()
var b = new Bundle("~/mycss", new CssMinify());
//添加Content檔案夾下的所有css檔案到捆綁
//第三個參數false表示，Content檔案夾下的子檔案夾下不添加到捆綁
b.AddDirectory("~/Content", "*.css", false);
//添加到BundleTable
BundleTable.Bundles.Add(b);

這樣在需要使用的頁面，加入下邊的代碼即可：

複製代碼 代碼如下:<link href="/mycss" rel="Stylesheet" />

總結：ASP.NET MVC 4 捆綁和縮小功能，使得減少 http 請求和壓縮 js、css 檔案變得非常簡單，這樣不需要我們手動來合并 js、css 檔案，也不需要使用工具來壓縮這些檔案，使得 js、css 檔案的管理變得簡單，易於維護，從而將我們從重複的工作中解脫出來。

作者：東奎