什么是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文件
- 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
- abc
- abc
- abc
- abc
- abc
- <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"));