詳解Asp.Net MVC的Bundle捆綁
大多數(shù)瀏覽器會(huì)對(duì)同一域名的請(qǐng)求限制請(qǐng)求數(shù)量，一般是在8個(gè)以內(nèi)。每次最多可以同時(shí)請(qǐng)求8個(gè)，要是資源多于8個(gè)，那么剩下的就要排隊(duì)等待請(qǐng)求了。所以為了提高首次加載頁(yè)面的速度。提高請(qǐng)求并發(fā)請(qǐng)求數(shù)量，降低請(qǐng)求次數(shù)就是一個(gè)很重要的點(diǎn)。
Bundle
Asp.Net MVC4和.NET Framework4.5提供了支持捆綁和壓縮的新類庫(kù)System.Web.Optimization。
該類庫(kù)提供了如下特性：
捆綁-將多個(gè)資源文件（javascript,css）合并成一個(gè)單獨(dú)的文件，但是合并成的單獨(dú)文件必須是相同類型，要么都是JavaScript要么都是CSS。
壓縮資源文件-清理空格，換行等，壓縮文件大小。
自動(dòng)清理緩存-服務(wù)端更新資源時(shí)，客戶端不再使用緩存資源，而是重新從服務(wù)端緩存。
1. 定義Bundle
在App_Start文件中新增一個(gè)BundleConfig.cs文件。實(shí)現(xiàn)靜態(tài)RegisterBundles方法。該方法用來(lái)創(chuàng)建，注冊(cè)和配置bundle。（在該目錄下代碼最好把他們的命名空間去掉 ".App_Start"，保持一個(gè)統(tǒng)一的高等級(jí)的命名空間）。
調(diào)用BundleCollection.Add()方法添加捆綁資源，該方法參數(shù)為ScriptBundle或StyleBundle。
ScriptBundle和StyleBundle需要傳遞一個(gè)虛擬路徑給構(gòu)造函數(shù)。該虛擬路徑其實(shí)就是該捆綁的名稱或者標(biāo)識(shí)符。所以該虛擬路徑可以任意設(shè)置，并不需要匹配物理路徑。Bundle的Include方法包含一個(gè)或者多個(gè)腳本。
通過(guò)引用該虛擬路徑就可以使用這些捆綁的資源@Script.Render("~/bundles/jquery")。
Debug模式下默認(rèn)沒(méi)有開(kāi)啟捆綁和壓縮，發(fā)布模式下默認(rèn)是開(kāi)啟的。
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版本時(shí)，不需要更新Bundle的引用，自動(dòng)使用最新的Jquery版本。
ScriptBundle和StyleBundle的Include方法參數(shù)是一個(gè)字符串類型的數(shù)組，所以一個(gè)Bundle實(shí)例可以添加多個(gè)文件。
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方法，可以添加指定目錄下的指定文件。
//添加Content/themes/base目錄下的所有css文件
bundles.Add(new StyleBundle("~/Content/css"").IncludeDirectory("~/Content/themes/base", "*.css"));
使用通配符要注意：
使用通配符添加資源時(shí)。這些資源文件是按照名稱來(lái)排序的。
2. 啟用Bundle
在Global.asax的Appliaction_Start方法中調(diào)用之前的定義的方法，BundleConfig.RegisterBundles(BundleTable.Bundles)
啟用Bundle。
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
3. 使用Bundle
如果我們需要在頁(yè)面中使用這些資源時(shí)?？梢酝ㄟ^(guò)Styles和Scripts來(lái)引入。如果要使用捆綁的Style，可以在頁(yè)面中添加@Styles.Render("~/Content/css")。如果要使用捆綁的Script，可以在頁(yè)面中添加@Script.Render("~/bundles/jquery")
<!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 應(yīng)用程序</title>
//引入樣式捆綁
@Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 我的 ASP.NET 應(yīng)用程序</p>
</footer>
</div>
//引入js捆綁
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
可以把CSS樣式文件置頂，JavaScript文件置底，來(lái)優(yōu)化網(wǎng)頁(yè)。但是modernizr.js文件要放在頁(yè)面頂部，因?yàn)橛行邮轿募枰?/p>
使用CDN
Bundle對(duì)CDN也提供了很好的支持。
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時(shí)，要應(yīng)對(duì)沒(méi)有獲取到資源的情況。
@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緩存
瀏覽器是根據(jù)URL來(lái)緩存數(shù)據(jù)的。瀏覽器無(wú)論何時(shí)請(qǐng)求資源，都會(huì)根據(jù)URL來(lái)檢查緩存里是否包含了該資源文件。如果包含了，瀏覽器就不會(huì)再去請(qǐng)求，而是使用緩存的文件，來(lái)渲染。
Bundle機(jī)制使我們每次修改資源文件時(shí)都會(huì)在URL后自動(dòng)添加一個(gè)哈希值,從而避免瀏覽器緩存，不能及時(shí)更新資源的情況。
v=******，后面的值就是哈希值。Bundle 在Debug模式下默認(rèn)是沒(méi)有開(kāi)啟的。在發(fā)布模式下才會(huì)開(kāi)啟。但是我們可以在BundleConfig下添加BundleTable.EnableOptimizations = true;開(kāi)啟捆綁模式。
Bundle注意事項(xiàng)
一個(gè)Bundle一般包含多個(gè)文件，如果我們只是修改了其中的一個(gè)文件，那么Bundle的哈希值也會(huì)改變，就會(huì)更新Bundle的所有文件。
捆綁和縮小主要降低了第一次訪問(wèn)頁(yè)面時(shí)加載的時(shí)間。此時(shí)靜態(tài)資源就會(huì)被緩存起來(lái)（js,css，圖片）。當(dāng)訪問(wèn)其他頁(yè)面，且該頁(yè)面的資源地址和第一次訪問(wèn)的地址相同時(shí)，就會(huì)從緩存里獲取，不再向服務(wù)端獲取。
如果資源過(guò)多，使用CDN，比使用Bundle更有效。當(dāng)然Bundle也可以結(jié)合CDN使用。 通過(guò)使用CDN，可以減輕每個(gè)主機(jī)名8個(gè)并發(fā)連接的瀏覽器限制。因?yàn)镃DN的主機(jī)名與您的主機(jī)站點(diǎn)不同，CDN上的資產(chǎn)請(qǐng)求不會(huì)與您的主機(jī)環(huán)境的8個(gè)并發(fā)連接數(shù)計(jì)數(shù)。
Bundle最好按照功能來(lái)區(qū)分捆綁。例如，默認(rèn)的ASP.Net應(yīng)用程序的NET MVC模板創(chuàng)建了一個(gè)與jQuery分離的jQuery驗(yàn)證包。因?yàn)樗鶆?chuàng)建的默認(rèn)視圖輸入輸出值，所以它們需要驗(yàn)證包。
上一篇：字符串陣列String[]轉(zhuǎn)換為整型陣列Int[]的實(shí)例
欄 目：C#教程
下一篇：C# 中的GroupBy的動(dòng)態(tài)拼接問(wèn)題及GroupBy&lt;&gt;用法介紹
本文標(biāo)題：詳解Asp.Net MVC的Bundle捆綁
本文地址：http://mengdiqiu.com.cn/a1/C_jiaocheng/5361.html
您可能感興趣的文章
- 01-10asp.net中XML如何做增刪改查操作
- 01-10C#中Socket通信用法實(shí)例詳解
- 01-10C#裝箱和拆箱原理詳解
- 01-10實(shí)現(xiàn)ASP.NET無(wú)刷新下載并提示下載完成的開(kāi)發(fā)思路
- 01-10C#類的多態(tài)性詳解
- 01-10C#創(chuàng)建不規(guī)則窗體的4種方式詳解
- 01-10C#中深度復(fù)制和淺度復(fù)制詳解
- 01-10ASP.NET MVC命名空間時(shí)引起錯(cuò)誤的解決方法
- 01-10C#數(shù)據(jù)結(jié)構(gòu)之隊(duì)列(Quene)實(shí)例詳解
- 01-10C#數(shù)據(jù)結(jié)構(gòu)之順序表(SeqList)實(shí)例詳解
閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-10C#通過(guò)反射獲取當(dāng)前工程中所有窗體并
- 01-10關(guān)于ASP網(wǎng)頁(yè)無(wú)法打開(kāi)的解決方案
- 01-10WinForm限制窗體不能移到屏幕外的方法
- 01-10WinForm繪制圓角的方法
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻 器左下角滾動(dòng)新
- 01-10C#停止線程的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#通過(guò)重寫Panel改變邊框顏色與寬度的
- 01-10C#實(shí)現(xiàn)讀取注冊(cè)表監(jiān)控當(dāng)前操作系統(tǒng)已
隨機(jī)閱讀
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能？
- 01-10delphi制作wav文件的方法
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-11Mac OSX 打開(kāi)原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什