[前端优化]使用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配置节下添加

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

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

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

配置好了后应该像这样

1  < configSections >
2         < section  name ="combres"  type ="Combres.ConfigSectionSetting, Combres, 
3      Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4" />
4    </ configSections >
5    < combres  definitionUrl ="~/App_Data/combres.xml" />

还需要添加httpModules的节点

1  < httpModules >
2           < add  name ="UrlRoutingModule"  type ="System.Web.Routing.UrlRoutingModule, 
3      System.Web.Routing, Version=3.5.0.0, Culture=neutral, 
4      PublicKeyToken=31BF3856AD364E35" />
5  </ 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 >
10       < resourceSet  name ="siteJs"  type ="js" >
11         < resource  path ="~/scripts/jquery-1.3.2.js"   />
12         < resource  path ="~/scripts/jquery-ui-1.7.2.custom.min.js"   />
13       </ resourceSet >
14     </ resourceSets >
15  </ 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" >
10         < param  name ="CollapseToLiteral"  type ="bool"  value ="true"   />
11         < param  name ="EvalsAreSafe"  type ="bool"  value ="true"   />
12         < param  name ="MacSafariQuirks"  type ="bool"  value ="true"   />
13         < param  name ="CatchAsLocal"  type ="bool"  value ="true"   />
14         < param  name ="LocalRenaming"  type ="string"  value ="CrunchAll"   />
15         < param  name ="OutputMode"  type ="string"  value ="SingleLine"   />
16         < param  name ="RemoveUnneededCode"  type ="bool"  value ="true"   />
17         < param  name ="StripDebugStatements"  type ="bool"  value ="true"   />
18       </ minifier >
19     </ 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 >
10       < minifier  name ="msajax"  type ="Combres.Minifiers.MSAjaxJSMinifier, Combres"  
11      binderType ="Combres.Binders.SimpleObjectBinder, Combres" >
12         < param  name ="CollapseToLiteral"  type ="bool"  value ="true"   />
13         < param  name ="EvalsAreSafe"  type ="bool"  value ="true"   />
14         < param  name ="MacSafariQuirks"  type ="bool"  value ="true"   />
15         < param  name ="CatchAsLocal"  type ="bool"  value ="true"   />
16         < param  name ="LocalRenaming"  type ="string"  value ="CrunchAll"   />
17         < param  name ="OutputMode"  type ="string"  value ="SingleLine"   />
18         < param  name ="RemoveUnneededCode"  type ="bool"  value ="true"   />
19         < param  name ="StripDebugStatements"  type ="bool"  value ="true"   />
20       </ minifier >
21     </ jsMinifiers >
22     < resourceSets  url ="~/combres.axd"  defaultDuration ="30"  
23                                  defaultVersion ="auto"  
24                                  defaultDebugEnabled ="auto"   >
25       < resourceSet  name ="siteCss"  type ="css"  minifierRef ="yui" >
26         < resource  path ="~/styles/site.css"   />
27         < resource  path ="~/styles/jquery-ui-1.7.2.custom.css"   />
28       </ resourceSet >
29       < resourceSet  name ="siteJs"  type ="js" >
30         < resource  path ="~/scripts/jquery-1.3.2.js"  minifierRef ="msajax"    />
31         < resource  path ="~/scripts/jquery-ui-1.7.2.custom.min.js"  minifierRef ="off"   />
32       </ resourceSet >
33     </ resourceSets >
34  </ combres >

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

1  protected   void  Application_Start( object  sender, EventArgs e)
2  {
3      RouteTable.Routes.AddCombresRoute( " Combres Route " );
4 }

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

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

页面使用

1  <% @ Import Namespace = " Combres "   %>
2  < head  runat ="server" >
3       < title > Using Combres </ title >
4       <% =  WebExtensions.CombresLink( " siteCss " )  %>
5       <% =  WebExtensions.CombresLink( " siteJs " )  %>
6  </ head >

页面使用效果

 

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