[普通]ASP.Net WebForms使用JS,CSS合并压缩技术

作者(passion) 更新(2016-12-28) 阅读(1690次) 评论(0) 分类( ASP.NET)

想必大家都早早安装VS2012尝鲜了吧？其实我也是，只是最近才腾出时间来好好研究研究，看看微软新的项目类型架构有什么变化。
今天就说这个Bundle.config。
想必做网站的都了解过网站优化吧，那么了解过网站优化就应该知道最起码的JS，CSS压缩合并技术吧，哈哈，这里就说到Bundle.config引入的目的和意义了。
新建一个ASP.Net Web Forms Application，使用.NET4.5框架。如下图：

运行应用程序，浏览器打开默认起始页，在IE9浏览器下按F12，调出界面代码调试工具，切换到Script标签下，可看到项目目录Script文件夹下的JS引用文件，如下图

这些浏览器请求自服务器的JS代码就是经过压缩合并过的。
如何使用呢？
在.NET4.5框架的webfroms应用程序下，默认模板下还添加了一个App_Start文件夹，里面一个是BundleConfig.cs文件，一个是AuthConfig.cs文件，第一个就是我们用来动态加载配置需要做压缩引用的JS或者CSS文件的处理程序类，第二个是第三方信息引入认证处理程序类，其实就是OAuth。当然我们要说的是第一个。

创建js合并包

在App_Start下的BundleConfig 类中添加jQuery, jQuery.UI and jQuery validation js，完整的示例代码如下：

using System.Web.Optimization;
 
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
 
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
 
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
 
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
 
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
 
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
}
}

注册需要压缩的包

下面的代码举例如何在项目Global.asax的Application_Start方法中注册已经预定义的压缩包。

void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterOpenAuth();
}

包的引用

在页面使用<asp:PlaceHolder> 标记，来引入页面需要引用的包，示例代码如下：

<asp:PlaceHolder runat="server">       
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/jqueryui") %>
</asp:PlaceHolder>

然后还需要将使用ScriptManager标签引用的代码注释掉：

<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web"Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
--%>
</Scripts>
</asp:ScriptManager>
<header>

上面引用的html5的标记，关键字。
至此需要压缩打包的JS工作做完了，接下来搞定CSS。

CSS打包

打开Bundle.config文件，里面有css打包的示例配置方式：

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
<styleBundle path="~/Content/css">
<include path="~/Content/Site.css" />
</styleBundle>
<styleBundle path="~/Content/themes/base/css">
<include path="~/Content/themes/base/jquery.ui.core.css" />
<include path="~/Content/themes/base/jquery.ui.resizable.css" />
<include path="~/Content/themes/base/jquery.ui.selectable.css" />
<include path="~/Content/themes/base/jquery.ui.accordion.css" />
<include path="~/Content/themes/base/jquery.ui.autocomplete.css" />
<include path="~/Content/themes/base/jquery.ui.button.css" />
<include path="~/Content/themes/base/jquery.ui.dialog.css" />
<include path="~/Content/themes/base/jquery.ui.slider.css" />
<include path="~/Content/themes/base/jquery.ui.tabs.css" />
<include path="~/Content/themes/base/jquery.ui.datepicker.css" />
<include path="~/Content/themes/base/jquery.ui.progressbar.css" />
<include path="~/Content/themes/base/jquery.ui.theme.css" />
</styleBundle>
</bundles>

你可以添加自己需要压缩合并的CSS文件在这个配置文件里面。
下面的代码示例CSS包和JS包的界面引用方式，如果你愿意，一个方法内是可以引用多个包的：www.it165.net

<%: Styles.Render("~/Content/themes/base/css",
"~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery",
"~/bundles/jqueryui") %>

PS：据我理解也可以使用如下标记来引用绑定的CSS文件包

1.<webopt:BundleReference runat="server" Path="~/Content/css" />

完整代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My <a href="http://www.it165.net/pro/webasp/" target="_blank" class="keylink">ASP</a>.NET Application</title>
<asp:PlaceHolder runat="server">    
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder> 
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web"Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
Scripts--%>
</Scripts>
</asp:ScriptManager>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-right">
<section id="login">
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
</section>
</div>
<footer>
<div class="content-wrapper">
</div>
</footer>
</form>
</body>
</html>