现在的位置: 首页 > 综合 > 正文

System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl捆绑提高程序性能

2013年10月02日 ⁄ 综合 ⁄ 共 4856字 ⁄ 字号 评论关闭

  什么是ASP.NET捆绑技术? http://axu.iteye.com/blog/1481520

   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文件 

C#代码  收藏代码
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Security;  
  6. using System.Web.SessionState;  
  7. using System.Web.Optimization;  
  8.   
  9. namespace jsm.WebOptimizationCase  
  10. {  
  11.     public class Global : System.Web.HttpApplication  
  12.     {  
  13.         void Application_Start(object sender, EventArgs e)  
  14.         {  
  15.             Bundle bundle = new Bundle("~/bluecss"new CssMinify());  
  16.             bundle.AddDirectory("~/Styles""global*.css"falsefalse);  
  17.             bundle.AddDirectory("~/Styles""blue.css"falsetrue);  
  18.             BundleTable.Bundles.Add(bundle);  
  19.             bundle = new Bundle("~/redcss"new CssMinify());  
  20.             bundle.AddDirectory("~/Styles""global*.css"falsefalse);  
  21.             bundle.AddDirectory("~/Styles""red.css"falsetrue);  
  22.             BundleTable.Bundles.Add(bundle);  
  23.         }  
  24.     }  
  25. }  



/Case1.aspx文件 

Html代码  收藏代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="case1.aspx.cs" Inherits="jsm.WebOptimizationCase.case1" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title> - JSM</title>  
  8. <%  
  9.     if (isred)  
  10.     {  
  11. %>  
  12.     <link href="<%=System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/redcss") %>rel="stylesheet" type="text/css" />  
  13. <%  
  14.     }  
  15.     else  
  16.     {  
  17. %>  
  18.       <link href="<%=System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bluecss") %>rel="stylesheet" type="text/css" />  
  19. <%  
  20.     }  
  21. %>  
  22. </head>  
  23. <body>  
  24. <form runat="server" id="f1">  
  25. <div class="head"><h1>JSM ASP.NET 4.5 Web Optimizer Demo</h1></div>  
  26. <div class="body">  
  27. abc  
  28.   
  29. abc  
  30.   
  31. abc  
  32.   
  33. abc  
  34.   
  35. abc  
  36.   
  37. abc  
  38.   
  39. <div>  
  40. <asp:Button runat="server" ID="btn1" Text="Red Theme" />  <asp:Button runat="server" ID="btn2" Text="blue Theme" />  
  41.   
  42. </div>  
  43.   
  44. </div>  
  45. <div class="footer">&copy;Copyright 2012 www.jishu.me</div>  
  46. </form>  
  47. </body>  
  48. </html>  



/case1.aspx.cs 

C#代码  收藏代码
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace jsm.WebOptimizationCase  
  9. {  
  10.     public partial class case1 : System.Web.UI.Page  
  11.     {  
  12.         public bool isred = true;  
  13.         protected override void OnInit(EventArgs e)  
  14.         {  
  15.             btn1.Click += new EventHandler(btn1_Click);  
  16.             btn2.Click += new EventHandler(btn2_Click);  
  17.             base.OnInit(e);  
  18.         }  
  19.   
  20.         void btn2_Click(object sender, EventArgs e)  
  21.         {  
  22.             //blue  
  23.             isred = false;  
  24.         }  
  25.   
  26.         void btn1_Click(object sender, EventArgs e)  
  27.         {  
  28.             //red  
  29.             isred = true;  
  30.         }  
  31.         protected void Page_Load(object sender, EventArgs e)  
  32.         {  
  33.   
  34.         }  
  35.     }  
  36. }  


/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中改为 

C#代码  收藏代码
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Security;  
  6. using System.Web.SessionState;  
  7. using System.Web.Optimization;  
  8.   
  9. namespace jsm.WebOptimizationCase  
  10. {  
  11.     public class Global : System.Web.HttpApplication  
  12.     {  
  13.         void Application_Start(object sender, EventArgs e)  
  14.         {  
  15.             BundleTable.Bundles.EnableDefaultBundles();   
  16.         }  
  17.     }  
  18. }  
  19.     BundleTable.Bundles.EnableDefaultBundles返编译为:  
  20.   
  21. public void EnableDefaultBundles()   
  22. {   
  23.      this.Add(new DynamicFolderBundle("js", JsMinify.Instance, "*.js"));   
  24.      this.Add(new DynamicFolderBundle("css", CssMinify.Instance, "*.css"));   

抱歉!评论已关闭.