本文目錄
什么是ASP.NET捆綁技術?
ASP.NET捆綁是ASP.NET 4.5的新功能，是System.Web.Optimization命名空間下的類頁員實現。他提供了一些ASP.NET運行性能方面的優化，比如，一個頁面可能有很多CSS/JS/圖片,通過靈活的應用BundleTable類，他可以幫你將文件合並壓縮代碼優化成一個最理想的文件，然后輸出到客戶端，從而提高了瀏覽器下載速度。
在MVC4.0 Beta版本中，默認使用了捆綁技術，在示例“Internet Application”模板項目中，Global.asax中“undleTable.Bundles.RegisterTemplateBundles()”，這句代碼雖然不靈活，但說明了微軟開發團隊想說的問題是，默認的態度推薦使用自定義捆綁，而非自動捆綁模式。
ASP.NET自定義捆綁實例
/Global.asax文件
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; using System.Web.SessionState; using System.Web.Optimization; namespace jsm.WebOptimizationCase { public class Global : System.Web.HttpApplication { void Application_Start(object sender, EventArgs e) { Bundle bundle = new Bundle("~/bluecss", new CssMinify()); bundle.AddDirectory("~/Styles", "global*.css", false, false); bundle.AddDirectory("~/Styles", "blue.css", false, true); BundleTable.Bundles.Add(bundle); bundle = new Bundle("~/redcss", new CssMinify()); bundle.AddDirectory("~/Styles", "global*.css", false, false); bundle.AddDirectory("~/Styles", "red.css", false, true); BundleTable.Bundles.Add(bundle); } } }
/Case1.aspx文件
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="case1.aspx.cs" Inherits="jsm.WebOptimizationCase.case1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title> - JSM</title> <% if (isred) { %> <link href="<%=System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/redcss") %>" rel="stylesheet" type="text/css" /> <% } else { %> <link href="<%=System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bluecss") %>" rel="stylesheet" type="text/css" /> <% } %> </head> <body> <form runat="server" id="f1"> <div class="head"><h1>JSM ASP.NET 4.5 Web Optimizer Demo</h1></div> <div class="body"> abc<br /> abc<br /> abc<br /> abc<br /> abc<br /> abc<br /> <div> <asp:Button runat="server" ID="btn1" Text="Red Theme" /> <asp:Button runat="server" ID="btn2" Text="blue Theme" /> </div> </div> <div class="footer">©Copyright 2012 www.jishu.me</div> </form> </body> </html>
/case1.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace jsm.WebOptimizationCase { public partial class case1 : System.Web.UI.Page { public bool isred = true; protected override void OnInit(EventArgs e) { btn1.Click += new EventHandler(btn1_Click); btn2.Click += new EventHandler(btn2_Click); base.OnInit(e); } void btn2_Click(object sender, EventArgs e) { //blue isred = false; } void btn1_Click(object sender, EventArgs e) { //red isred = true; } protected void Page_Load(object sender, EventArgs e) { } } }
/Styles/global.css
body{margin:0px;font-size:14px;} ul{list-style-type:none;margin:0px;padding:0px;}
/Styles/global2.css
h1{font-size:20px;font-family:'微軟雅黑';}
/Styles/red.css
body{background:yellow;} h1{color:Red;}
/Styles/blue.css
body{background:blue;color:#fff;}
示例解析
示例的目是為了實現CSS文件的組合壓縮，從而達到優化的目的。在Global.asax中指定了兩個界面風格主題，藍色主題和紅色主題，藍色使用global.css和global2.css、blue.css組合實現。紅色主題由global.css和global2.css、red.css組合實現。在客戶端瀏覽發現，紅色主題的CSS的Url為“/redcss?v=5onyaQIYWKcHBwZmCCv816K53VeMHta5p4o47goqaX41”，並且請示為一下代碼段：
body{margin:0;font-size:14px}ul{list-style-type:none;margin:0;padding:0}h1{font-size:20px;font-family:'微軟雅黑'}body{background:#ff0}h1{color:red}
由此可見，程序將redcss組的global.css和global2.css、red.css文件內容組合，並去除了無效字符，從而節省了流量和解析速度。
自動捆綁實現
微軟提供了DynamicFolderBundle類，可以自動將CSS捆綁，而不用將要下載的CSS手動通過Bundle類一個一個將CSS添加，在簡單的項目中可以使用這種方式從而加快項目開發速度。 比如將在Global.asax中改為
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; using System.Web.SessionState; using System.Web.Optimization; namespace jsm.WebOptimizationCase { public class Global : System.Web.HttpApplication { void Application_Start(object sender, EventArgs e) { BundleTable.Bundles.EnableDefaultBundles(); } } }
BundleTable.Bundles.EnableDefaultBundles返編譯為：
public void EnableDefaultBundles() { this.Add(new DynamicFolderBundle("js", JsMinify.Instance, "*.js")); this.Add(new DynamicFolderBundle("css", CssMinify.Instance, "*.css")); }
表示默認加載當前目錄下的所有CSS或js文件。從而簡化程序邏輯！
示例源碼下載
下載地址：http://files.cnblogs.com/a-xu/jsm.WebOptimizationCase.7z
本文版權所有阿旭博客，如要轉載，請附加本文地址：http://www.cnblogs.com/a-xu/archive/2012/04/10/aspnet_BundleTable.html