[前端优化]使用Combres合并对js、css文件的请求

在前端优化的各种金律铁规中，“减少客户端对资源的请求”都会在其中出现，刚好最近对网站做一些优化，使用了一下Combres组件，有点心得，遂整理成文。

园子中也有几篇Combres组件的介绍，如：Combres库学习小结以及部分源码分析和使用Combres 库 ASP.NET 网站优化。可部署时参考起来显得有些简略，所以此文也算对此类文章的补充。

配置组件

此组件的一些作用和原理在我上面提及的两篇文章中有介绍，可以自行移步至对应的文章中查看。这里还有有作者介绍的一些详细的使用方法。

下载Combres组件，下载下来的包里包含了DLL、帮助文件、源码和一些例子，我们现在直接来看如何部署。

在下载下来的\Binary\merged\中有一个Combres.dll，在readme文件中得知其对可能要用到的dll都进行了打包，如Combres.dll、fasterflect.dll、log4net.dll、ajaxmin.dll、 yahoo.yui.compressor.dll等等。

在项目中引用此dll，下面来配置下配置文件。

首先配置下web.config。

在configSections配置节下添加

 <section name="combres" type="Combres.ConfigSectionSetting, Combres, Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/> 

在configuration配置节下添加Combres配置文件的路径，此文件的作用我们下面再说。

 <combres definitionUrl="~/App_Data/combres.xml"/>

配置好了后应该像这样

 <configSections>

       <section name="combres" type="Combres.ConfigSectionSetting, Combres, 

     Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/>

  </configSections>

  <combres definitionUrl="~/App_Data/combres.xml"/>

还需要添加httpModules的节点

 <httpModules>

         <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, 

     System.Web.Routing, Version=3.5.0.0, Culture=neutral, 

     PublicKeyToken=31BF3856AD364E35"/>

 </httpModules>

注意：需要在项目中添加对System.Web.Routing的引用。

下面来配置Combres的配置文件，按照上面的路径配置，我们就在App_Data下添加combres.xml文件。

添加如下格式的配置文件。 

 1 <?xml version="1.0" encoding="utf-8" ?>

 2 <combres xmlns='urn:combres'>

 3   <resourceSets url="~/combres.axd" defaultDuration="30" 

 4                                 defaultVersion="auto" 

 5                                 defaultDebugEnabled="auto" >

 6     <resourceSet name="siteCss" type="css">

 7       <resource path="~/styles/site.css" />

 8       <resource path="~/styles/jquery-ui-1.7.2.custom.css" />

 9     </resourceSet>

     <resourceSet name="siteJs" type="js">

       <resource path="~/scripts/jquery-1.3.2.js" />

       <resource path="~/scripts/jquery-ui-1.7.2.custom.min.js" />

     </resourceSet>

   </resourceSets>

 </combres>    

• defaultDuration 默认缓存的时间，单位为天数
• defaultVersion 合并后的资源版本，在你修改了资源文件后需要对版本进行修改，你可以指定auto或者手动设置一个版本号
• defaultDebugEnabled 调试的模式，为true时那么资源文件不进行压缩，开发时可以设置成true，上线后设置成false

 具体添加压缩方法的配置节点，用于选择哪种方法对资源文件进行压缩

 1 <cssMinifiers>

 2     <minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres">

 3       <param name="CssCompressionType" type="string" value="StockYuiCompressor" />

 4       <param name="ColumnWidth" type="int" value="-1" />

 5     </minifier>

 6   </cssMinifiers>

 7   <jsMinifiers>

 8     <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres" 

 9     binderType="Combres.Binders.SimpleObjectBinder, Combres">

       <param name="CollapseToLiteral" type="bool" value="true" />

       <param name="EvalsAreSafe" type="bool" value="true" />

       <param name="MacSafariQuirks" type="bool" value="true" />

       <param name="CatchAsLocal" type="bool" value="true" />

       <param name="LocalRenaming" type="string" value="CrunchAll" />

       <param name="OutputMode" type="string" value="SingleLine" />

       <param name="RemoveUnneededCode" type="bool" value="true" />

       <param name="StripDebugStatements" type="bool" value="true" />

     </minifier>

   </jsMinifiers>

 要使用哪种压缩方法，在resourceSet或者在resource上添加相应的属性即可，配置后像下面这样

 1 <?xml version="1.0" encoding="utf-8" ?>

 2 <combres xmlns='urn:combres'>

 3   <cssMinifiers>

 4     <minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres">

 5       <param name="CssCompressionType" type="string" value="StockYuiCompressor" />

 6       <param name="ColumnWidth" type="int" value="-1" />

 7     </minifier>

 8   </cssMinifiers>

 9   <jsMinifiers>

     <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres" 

     binderType="Combres.Binders.SimpleObjectBinder, Combres">

       <param name="CollapseToLiteral" type="bool" value="true" />

       <param name="EvalsAreSafe" type="bool" value="true" />

       <param name="MacSafariQuirks" type="bool" value="true" />

       <param name="CatchAsLocal" type="bool" value="true" />

       <param name="LocalRenaming" type="string" value="CrunchAll" />

       <param name="OutputMode" type="string" value="SingleLine" />

       <param name="RemoveUnneededCode" type="bool" value="true" />

       <param name="StripDebugStatements" type="bool" value="true" />

     </minifier>

   </jsMinifiers>

   <resourceSets url="~/combres.axd" defaultDuration="30" 

                                 defaultVersion="auto" 

                                 defaultDebugEnabled="auto" >

     <resourceSet name="siteCss" type="css" minifierRef="yui">

       <resource path="~/styles/site.css" />

       <resource path="~/styles/jquery-ui-1.7.2.custom.css" />

     </resourceSet>

     <resourceSet name="siteJs" type="js">

       <resource path="~/scripts/jquery-1.3.2.js" minifierRef="msajax"  />

       <resource path="~/scripts/jquery-ui-1.7.2.custom.min.js" minifierRef="off" />

     </resourceSet>

   </resourceSets>

 </combres>

最后还需要在Global.ascx的Application_Start中添加加载的方法即可

 protected void Application_Start(object sender, EventArgs e)

 {

     RouteTable.Routes.AddCombresRoute("Combres Route");

 }

 记得在Global.ascx的头部要引入命名空间

 <%@ Import Namespace="System.Web.Routing" %>

 <%@ Import Namespace="Combres" %>

页面使用

 <%@ Import Namespace="Combres" %>

 <head runat="server">

     <title>Using Combres</title>

     <%= WebExtensions.CombresLink("siteCss") %>

     <%= WebExtensions.CombresLink("siteJs") %>

 </head>

页面使用效果

 

当页面中引用了很多个js、css文件时，将都被合并成两个请求，以达到减少HTTP请求的目的。