浏覽器在向服務器發送請求的時候，請求的文件鏈接數量是有限制的，如果頁面文件少就沒有什麼問題了，如果文件太多就會導致鏈接失敗等等問題。針對這個問題MVC4中增加了新功能：BundleConfig.cs，使用BundleConfig可以將多個文件請求和並成一個請求，去除文件中的一些注釋、空白、壓縮文件的大小，自動合並壓縮優化代碼，縮短響應時間，提高網頁速度，起到優化網站的作用。
在global.asax文件中的Application_Start()方法中添加以下代碼
1
BundleConfig.RegisterBundles(BundleTable.Bundles);
打開：App_Start/BundleConfig.cs 文件，裡面有些系統默認的方法（如果是自己創建的文件是沒有的，可以通過創建一個非空的MVC項目來查看）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39public class BundleConfig
{
// 有關 Bundling 的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
//JS文件
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// 使用 Modernizr 的開發版本進行開發和了解信息。然後，當你做好
// 生產准備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
//CSS文件
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"));
}
}
代碼解釋：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
"~/bundles/jquery" ：表示分組的文件路徑（也就是產生一個虛擬的文件夾）。
"~/Scripts/jquery-{version}.js" ：表示該分組包含的具體文件，是項目實際存在的文件。如果有多個文件參考代碼中下面的寫法。 {version}參數代表版本號 ,*代表所有，這兩個是可以理解為通配符。
代碼中的其它幾個add意思是一樣的。根據不同的文件類型等創建不同的分組，比如js文件創建一個分組，css創建一個分組等。
在視圖頁面添加代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<!--Style 分組代碼調用 名稱就是定義的分組文件名稱 -->
@Styles.Render("~/Content/css")
<!--JavaScript 分組代碼調用 名稱就是定義的分組文件名稱 -->
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
<!--JavaScript 分組代碼調用 名稱就是定義的分組文件名稱 -->
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
代碼解釋：
1@Scripts.Render("~/bundles/jquery")
其中的“~/bundles/jquery” 是上面定義的文件分組名稱
接下來我們通過分組將請求多個文件合並成請求一個，可以使用如下兩種方法來實現：
將web.config中的編譯調試debug設為false <compilation debug="false" targetFramework="4.5"/>
在BundleConfig中的方法末尾添加 BundleTable.EnableOptimizations = true; （建議使用這個方法），
配置完成以後刷新頁面，就可以看到 ：
src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
解釋：?前面是分組名稱，後面是多個文件合並後生成的哈希碼
可以要通過火狐的firebug或者是谷歌浏覽器查看合並前後的效果，看著加載文件數量和加載速度還是有很大提升的。
1、使用中注意區分Js和css文件，產生分組的方法和前台調用的方法名稱都是不一樣的，詳細請看上面的代碼
2、默認情況下BundleTable.Bundles會過濾掉後綴名為這些的文件：
,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,
當加載後綴名為這些的文件，將顯示空白。可以用如下方法去除對這些文件過濾限制
1 2 3 4 BundleTable.Bundles.IgnoreList.Clear();
BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);
//BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);
//BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);
如果提示：未能加載 WebGrease.dll ，請查看這裡：http://ityouzi.com/archives/mvc-webgrease-error.html
