[前端优化]使用Combres合并对js、css文件的请求
![[前端优化]使用Combres合并对js、css文件的请求](http://pic.xiahunao.cn/yaotu/[前端优化]使用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<sectionname="combres"type="Combres.ConfigSectionSetting, Combres, Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/>
在configuration配置节下添加Combres配置文件的路径，此文件的作用我们下面再说。
1<combresdefinitionUrl="~/App_Data/combres.xml"/>
配置好了后应该像这样
1<configSections>
2<sectionname="combres"type="Combres.ConfigSectionSetting, Combres,
3Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/>
4</configSections>
5<combresdefinitionUrl="~/App_Data/combres.xml"/>
2<sectionname="combres"type="Combres.ConfigSectionSetting, Combres,
3Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/>
4</configSections>
5<combresdefinitionUrl="~/App_Data/combres.xml"/>
还需要添加httpModules的节点
1<httpModules>
2<addname="UrlRoutingModule"type="System.Web.Routing.UrlRoutingModule,
3System.Web.Routing, Version=3.5.0.0, Culture=neutral,
4PublicKeyToken=31BF3856AD364E35"/>
5</httpModules>
2<addname="UrlRoutingModule"type="System.Web.Routing.UrlRoutingModule,
3System.Web.Routing, Version=3.5.0.0, Culture=neutral,
4PublicKeyToken=31BF3856AD364E35"/>
5</httpModules>
注意：需要在项目中添加对System.Web.Routing的引用。
下面来配置Combres的配置文件，按照上面的路径配置，我们就在App_Data下添加combres.xml文件。
添加如下格式的配置文件。
1<?xml version="1.0" encoding="utf-8"?>
2<combresxmlns='urn:combres'>
3<resourceSetsurl="~/combres.axd"defaultDuration="30"
4defaultVersion="auto"
5defaultDebugEnabled="auto">
6<resourceSetname="siteCss"type="css">
7<resourcepath="~/styles/site.css"/>
8<resourcepath="~/styles/jquery-ui-1.7.2.custom.css"/>
9</resourceSet>
10<resourceSetname="siteJs"type="js">
11<resourcepath="~/scripts/jquery-1.3.2.js"/>
12<resourcepath="~/scripts/jquery-ui-1.7.2.custom.min.js"/>
13</resourceSet>
14</resourceSets>
15</combres>
2<combresxmlns='urn:combres'>
3<resourceSetsurl="~/combres.axd"defaultDuration="30"
4defaultVersion="auto"
5defaultDebugEnabled="auto">
6<resourceSetname="siteCss"type="css">
7<resourcepath="~/styles/site.css"/>
8<resourcepath="~/styles/jquery-ui-1.7.2.custom.css"/>
9</resourceSet>
10<resourceSetname="siteJs"type="js">
11<resourcepath="~/scripts/jquery-1.3.2.js"/>
12<resourcepath="~/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<minifiername="yui"type="Combres.Minifiers.YuiCssMinifier, Combres">
3<paramname="CssCompressionType"type="string"value="StockYuiCompressor"/>
4<paramname="ColumnWidth"type="int"value="-1"/>
5</minifier>
6</cssMinifiers>
7<jsMinifiers>
8<minifiername="msajax"type="Combres.Minifiers.MSAjaxJSMinifier, Combres"
9binderType="Combres.Binders.SimpleObjectBinder, Combres">
10<paramname="CollapseToLiteral"type="bool"value="true"/>
11<paramname="EvalsAreSafe"type="bool"value="true"/>
12<paramname="MacSafariQuirks"type="bool"value="true"/>
13<paramname="CatchAsLocal"type="bool"value="true"/>
14<paramname="LocalRenaming"type="string"value="CrunchAll"/>
15<paramname="OutputMode"type="string"value="SingleLine"/>
16<paramname="RemoveUnneededCode"type="bool"value="true"/>
17<paramname="StripDebugStatements"type="bool"value="true"/>
18</minifier>
19</jsMinifiers>
2<minifiername="yui"type="Combres.Minifiers.YuiCssMinifier, Combres">
3<paramname="CssCompressionType"type="string"value="StockYuiCompressor"/>
4<paramname="ColumnWidth"type="int"value="-1"/>
5</minifier>
6</cssMinifiers>
7<jsMinifiers>
8<minifiername="msajax"type="Combres.Minifiers.MSAjaxJSMinifier, Combres"
9binderType="Combres.Binders.SimpleObjectBinder, Combres">
10<paramname="CollapseToLiteral"type="bool"value="true"/>
11<paramname="EvalsAreSafe"type="bool"value="true"/>
12<paramname="MacSafariQuirks"type="bool"value="true"/>
13<paramname="CatchAsLocal"type="bool"value="true"/>
14<paramname="LocalRenaming"type="string"value="CrunchAll"/>
15<paramname="OutputMode"type="string"value="SingleLine"/>
16<paramname="RemoveUnneededCode"type="bool"value="true"/>
17<paramname="StripDebugStatements"type="bool"value="true"/>
18</minifier>
19</jsMinifiers>
要使用哪种压缩方法，在resourceSet或者在resource上添加相应的属性即可，配置后像下面这样
1<?xml version="1.0" encoding="utf-8"?>
2<combresxmlns='urn:combres'>
3<cssMinifiers>
4<minifiername="yui"type="Combres.Minifiers.YuiCssMinifier, Combres">
5<paramname="CssCompressionType"type="string"value="StockYuiCompressor"/>
6<paramname="ColumnWidth"type="int"value="-1"/>
7</minifier>
8</cssMinifiers>
9<jsMinifiers>
10<minifiername="msajax"type="Combres.Minifiers.MSAjaxJSMinifier, Combres"
11binderType="Combres.Binders.SimpleObjectBinder, Combres">
12<paramname="CollapseToLiteral"type="bool"value="true"/>
13<paramname="EvalsAreSafe"type="bool"value="true"/>
14<paramname="MacSafariQuirks"type="bool"value="true"/>
15<paramname="CatchAsLocal"type="bool"value="true"/>
16<paramname="LocalRenaming"type="string"value="CrunchAll"/>
17<paramname="OutputMode"type="string"value="SingleLine"/>
18<paramname="RemoveUnneededCode"type="bool"value="true"/>
19<paramname="StripDebugStatements"type="bool"value="true"/>
20</minifier>
21</jsMinifiers>
22<resourceSetsurl="~/combres.axd"defaultDuration="30"
23defaultVersion="auto"
24defaultDebugEnabled="auto">
25<resourceSetname="siteCss"type="css"minifierRef="yui">
26<resourcepath="~/styles/site.css"/>
27<resourcepath="~/styles/jquery-ui-1.7.2.custom.css"/>
28</resourceSet>
29<resourceSetname="siteJs"type="js">
30<resourcepath="~/scripts/jquery-1.3.2.js"minifierRef="msajax"/>
31<resourcepath="~/scripts/jquery-ui-1.7.2.custom.min.js"minifierRef="off"/>
32</resourceSet>
33</resourceSets>
34</combres>
2<combresxmlns='urn:combres'>
3<cssMinifiers>
4<minifiername="yui"type="Combres.Minifiers.YuiCssMinifier, Combres">
5<paramname="CssCompressionType"type="string"value="StockYuiCompressor"/>
6<paramname="ColumnWidth"type="int"value="-1"/>
7</minifier>
8</cssMinifiers>
9<jsMinifiers>
10<minifiername="msajax"type="Combres.Minifiers.MSAjaxJSMinifier, Combres"
11binderType="Combres.Binders.SimpleObjectBinder, Combres">
12<paramname="CollapseToLiteral"type="bool"value="true"/>
13<paramname="EvalsAreSafe"type="bool"value="true"/>
14<paramname="MacSafariQuirks"type="bool"value="true"/>
15<paramname="CatchAsLocal"type="bool"value="true"/>
16<paramname="LocalRenaming"type="string"value="CrunchAll"/>
17<paramname="OutputMode"type="string"value="SingleLine"/>
18<paramname="RemoveUnneededCode"type="bool"value="true"/>
19<paramname="StripDebugStatements"type="bool"value="true"/>
20</minifier>
21</jsMinifiers>
22<resourceSetsurl="~/combres.axd"defaultDuration="30"
23defaultVersion="auto"
24defaultDebugEnabled="auto">
25<resourceSetname="siteCss"type="css"minifierRef="yui">
26<resourcepath="~/styles/site.css"/>
27<resourcepath="~/styles/jquery-ui-1.7.2.custom.css"/>
28</resourceSet>
29<resourceSetname="siteJs"type="js">
30<resourcepath="~/scripts/jquery-1.3.2.js"minifierRef="msajax"/>
31<resourcepath="~/scripts/jquery-ui-1.7.2.custom.min.js"minifierRef="off"/>
32</resourceSet>
33</resourceSets>
34</combres>
最后还需要在Global.ascx的Application_Start中添加加载的方法即可
1protectedvoidApplication_Start(objectsender, EventArgs e)
2{
3RouteTable.Routes.AddCombresRoute("Combres Route");
4}
2{
3RouteTable.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<headrunat="server">
3<title>Using Combres</title>
4<%=WebExtensions.CombresLink("siteCss")%>
5<%=WebExtensions.CombresLink("siteJs")%>
6</head>
2<headrunat="server">
3<title>Using Combres</title>
4<%=WebExtensions.CombresLink("siteCss")%>
5<%=WebExtensions.CombresLink("siteJs")%>
6</head>
页面使用效果
当页面中引用了很多个js、css文件时，将都被合并成两个请求，以达到减少HTTP请求的目的。