在前端优化的各种金律铁规中，“减少客户端对资源的请求”都会在其中出现，刚好最近对网站做一些优化，使用了一下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" />
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 >
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 >
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 >
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 >
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 }
2 {
3 RouteTable.Routes.AddCombresRoute( " Combres Route " );
4 }
记得在Global.ascx的头部要引入命名空间
1
<%
@ Import Namespace
=
"
System.Web.Routing
"
%>
2 <% @ Import Namespace = " Combres " %>
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 >
2 < head runat ="server" >
3 < title > Using Combres </ title >
4 <% = WebExtensions.CombresLink( " siteCss " ) %>
5 <% = WebExtensions.CombresLink( " siteJs " ) %>
6 </ head >
页面使用效果
当页面中引用了很多个js、css文件时，将都被合并成两个请求，以达到减少HTTP请求的目的。
作者：Parry
出处：http://www.cnblogs.com/parry/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
