大多數瀏覽器會對同一域名的請求限制請求數量，一般是在8個以內。每次最多可以同時請求8個，要是資源多于8個，那么剩下的就要排隊等待請求了。所以為了提高首次加載頁面的速度。提高請求并發請求數量，降低請求次數就是一個很重要的點。
Bundle
Asp.Net MVC4和.NET Framework4.5提供了支持捆綁和壓縮的新類庫System.Web.Optimization。
該類庫提供了如下特性：
捆綁-將多個資源文件（javascript,css）合并成一個單獨的文件，但是合并成的單獨文件必須是相同類型，要么都是JavaScript要么都是CSS。
壓縮資源文件-清理空格，換行等，壓縮文件大小。
自動清理緩存-服務端更新資源時，客戶端不再使用緩存資源，而是重新從服務端緩存。
1. 定義Bundle
在App_Start文件中新增一個BundleConfig.cs文件。實現靜態RegisterBundles方法。該方法用來創建，注冊和配置bundle。（在該目錄下代碼最好把他們的命名空間去掉 ".App_Start"，保持一個統一的高等級的命名空間）。
調用BundleCollection.Add()方法添加捆綁資源，該方法參數為ScriptBundle或StyleBundle。
ScriptBundle和StyleBundle需要傳遞一個虛擬路徑給構造函數。該虛擬路徑其實就是該捆綁的名稱或者標識符。所以該虛擬路徑可以任意設置，并不需要匹配物理路徑。Bundle的Include方法包含一個或者多個腳本。
通過引用該虛擬路徑就可以使用這些捆綁的資源@Script.Render("~/bundles/jquery")。
Debug模式下默認沒有開啟捆綁和壓縮，發布模式下默認是開啟的。
|
1
2
3
4
5
6
7
8
9
10
|
public static void RegisterBundles(BundleCollection bundles){ //該值為true，在任何模式下都使用捆綁和壓縮。 //BundleTable.EnableOptimizations = true; //添加名稱為“~/bundles/jquery”腳本捆綁 bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); //添加名稱為“~/Content/css”樣式捆綁 bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Site.css"));} |
使用{version}占位符可以在使用NuGet更新Jquery版本時，不需要更新Bundle的引用，自動使用最新的Jquery版本。
ScriptBundle和StyleBundle的Include方法參數是一個字符串類型的數組，所以一個Bundle實例可以添加多個文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
bundles.Add(new StyleBundle("~/Content/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")); |
但是Bundle類也提供了IncludeDirectory方法，可以添加指定目錄下的指定文件。
|
1
2
|
//添加Content/themes/base目錄下的所有css文件bundles.Add(new StyleBundle("~/Content/css"").IncludeDirectory("~/Content/themes/base", "*.css")); |
使用通配符要注意：
使用通配符添加資源時。這些資源文件是按照名稱來排序的。
2. 啟用Bundle
在Global.asax的Appliaction_Start方法中調用之前的定義的方法，BundleConfig.RegisterBundles(BundleTable.Bundles)
啟用Bundle。
|
1
2
3
4
5
6
7
|
public class MvcApplication : System.Web.HttpApplication{ protected void Application_Start() { BundleConfig.RegisterBundles(BundleTable.Bundles); }} |
|
1
2
3
|
3. 使用Bundle如果我們需要在頁面中使用這些資源時?？梢酝ㄟ^Styles和Scripts來引入。如果要使用捆綁的Style，可以在頁面中添加@Styles.Render("~/Content/css")。如果要使用捆綁的Script，可以在頁面中添加@Script.Render("~/bundles/jquery") |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - 我的 ASP.NET 應用程序</title> //引入樣式捆綁 @Styles.Render("~/Content/css") </head><body> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - 我的 ASP.NET 應用程序</p> </footer> </div> //引入js捆綁 @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)</body></html> |
可以把CSS樣式文件置頂，JavaScript文件置底，來優化網頁。但是modernizr.js文件要放在頁面頂部，因為有些樣式文件需要。
使用CDN
Bundle對CDN也提供了很好的支持。
|
1
2
3
4
5
6
7
8
9
10
|
public static void RegisterBundles(BundleCollection bundles){ //bundles.Add(new ScriptBundle("~/bundles/jquery").Include( // "~/Scripts/jquery-{version}.js")); bundles.UseCdn = true; //啟用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"));} |
在使用CDN時，要應對沒有獲取到資源的情況。
|
1
2
3
4
5
6
7
8
9
10
|
@Scripts.Render("~/bundles/jquery") <script type="text/javascript"> if (typeof jQuery == 'undefined') { var e = document.createElement('script'); e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")'; e.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(e); } </script> |
Bundle緩存
瀏覽器是根據URL來緩存數據的。瀏覽器無論何時請求資源，都會根據URL來檢查緩存里是否包含了該資源文件。如果包含了，瀏覽器就不會再去請求，而是使用緩存的文件，來渲染。
Bundle機制使我們每次修改資源文件時都會在URL后自動添加一個哈希值,從而避免瀏覽器緩存，不能及時更新資源的情況。
v=******，后面的值就是哈希值。Bundle 在Debug模式下默認是沒有開啟的。在發布模式下才會開啟。但是我們可以在BundleConfig下添加BundleTable.EnableOptimizations = true;開啟捆綁模式。
Bundle注意事項
一個Bundle一般包含多個文件，如果我們只是修改了其中的一個文件，那么Bundle的哈希值也會改變，就會更新Bundle的所有文件。
捆綁和縮小主要降低了第一次訪問頁面時加載的時間。此時靜態資源就會被緩存起來（js,css，圖片）。當訪問其他頁面，且該頁面的資源地址和第一次訪問的地址相同時，就會從緩存里獲取，不再向服務端獲取。
如果資源過多，使用CDN，比使用Bundle更有效。當然Bundle也可以結合CDN使用。 通過使用CDN，可以減輕每個主機名8個并發連接的瀏覽器限制。因為CDN的主機名與您的主機站點不同，CDN上的資產請求不會與您的主機環境的8個并發連接數計數。
Bundle最好按照功能來區分捆綁。例如，默認的ASP.Net應用程序的NET MVC模板創建了一個與jQuery分離的jQuery驗證包。因為所創建的默認視圖輸入輸出值，所以它們需要驗證包。
原文鏈接：http://www.cnblogs.com/JoeSnail/p/7910875.html
