[前端优化]使用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配置节下添加1sectionnamecombrestypeCombres.ConfigSectionSetting, Combres, Version2.0.0.0, Cultureneutral, PublicKeyToken49212d24adfbe4b4/在configuration配置节下添加Combres配置文件的路径此文件的作用我们下面再说。1combresdefinitionUrl~/App_Data/combres.xml/配置好了后应该像这样1configSections2sectionnamecombrestypeCombres.ConfigSectionSetting, Combres,3Version2.0.0.0, Cultureneutral, PublicKeyToken49212d24adfbe4b4/4/configSections5combresdefinitionUrl~/App_Data/combres.xml/还需要添加httpModules的节点1httpModules2addnameUrlRoutingModuletypeSystem.Web.Routing.UrlRoutingModule,3System.Web.Routing, Version3.5.0.0, Cultureneutral,4PublicKeyToken31BF3856AD364E35/5/httpModules注意需要在项目中添加对System.Web.Routing的引用。下面来配置Combres的配置文件按照上面的路径配置我们就在App_Data下添加combres.xml文件。添加如下格式的配置文件。1?xml version1.0 encodingutf-8?2combresxmlnsurn:combres3resourceSetsurl~/combres.axddefaultDuration304defaultVersionauto5defaultDebugEnabledauto6resourceSetnamesiteCsstypecss7resourcepath~/styles/site.css/8resourcepath~/styles/jquery-ui-1.7.2.custom.css/9/resourceSet10resourceSetnamesiteJstypejs11resourcepath~/scripts/jquery-1.3.2.js/12resourcepath~/scripts/jquery-ui-1.7.2.custom.min.js/13/resourceSet14/resourceSets15/combresdefaultDuration 默认缓存的时间单位为天数defaultVersion 合并后的资源版本在你修改了资源文件后需要对版本进行修改你可以指定auto或者手动设置一个版本号defaultDebugEnabled 调试的模式为true时那么资源文件不进行压缩开发时可以设置成true上线后设置成false具体添加压缩方法的配置节点用于选择哪种方法对资源文件进行压缩1cssMinifiers2minifiernameyuitypeCombres.Minifiers.YuiCssMinifier, Combres3paramnameCssCompressionTypetypestringvalueStockYuiCompressor/4paramnameColumnWidthtypeintvalue-1/5/minifier6/cssMinifiers7jsMinifiers8minifiernamemsajaxtypeCombres.Minifiers.MSAjaxJSMinifier, Combres9binderTypeCombres.Binders.SimpleObjectBinder, Combres10paramnameCollapseToLiteraltypeboolvaluetrue/11paramnameEvalsAreSafetypeboolvaluetrue/12paramnameMacSafariQuirkstypeboolvaluetrue/13paramnameCatchAsLocaltypeboolvaluetrue/14paramnameLocalRenamingtypestringvalueCrunchAll/15paramnameOutputModetypestringvalueSingleLine/16paramnameRemoveUnneededCodetypeboolvaluetrue/17paramnameStripDebugStatementstypeboolvaluetrue/18/minifier19/jsMinifiers要使用哪种压缩方法在resourceSet或者在resource上添加相应的属性即可配置后像下面这样1?xml version1.0 encodingutf-8?2combresxmlnsurn:combres3cssMinifiers4minifiernameyuitypeCombres.Minifiers.YuiCssMinifier, Combres5paramnameCssCompressionTypetypestringvalueStockYuiCompressor/6paramnameColumnWidthtypeintvalue-1/7/minifier8/cssMinifiers9jsMinifiers10minifiernamemsajaxtypeCombres.Minifiers.MSAjaxJSMinifier, Combres11binderTypeCombres.Binders.SimpleObjectBinder, Combres12paramnameCollapseToLiteraltypeboolvaluetrue/13paramnameEvalsAreSafetypeboolvaluetrue/14paramnameMacSafariQuirkstypeboolvaluetrue/15paramnameCatchAsLocaltypeboolvaluetrue/16paramnameLocalRenamingtypestringvalueCrunchAll/17paramnameOutputModetypestringvalueSingleLine/18paramnameRemoveUnneededCodetypeboolvaluetrue/19paramnameStripDebugStatementstypeboolvaluetrue/20/minifier21/jsMinifiers22resourceSetsurl~/combres.axddefaultDuration3023defaultVersionauto24defaultDebugEnabledauto25resourceSetnamesiteCsstypecssminifierRefyui26resourcepath~/styles/site.css/27resourcepath~/styles/jquery-ui-1.7.2.custom.css/28/resourceSet29resourceSetnamesiteJstypejs30resourcepath~/scripts/jquery-1.3.2.jsminifierRefmsajax/31resourcepath~/scripts/jquery-ui-1.7.2.custom.min.jsminifierRefoff/32/resourceSet33/resourceSets34/combres最后还需要在Global.ascx的Application_Start中添加加载的方法即可1protectedvoidApplication_Start(objectsender, EventArgs e)2{3RouteTable.Routes.AddCombresRoute(Combres Route);4}记得在Global.ascx的头部要引入命名空间1% Import NamespaceSystem.Web.Routing%2% Import NamespaceCombres%页面使用1% Import NamespaceCombres%2headrunatserver3titleUsing Combres/title4%WebExtensions.CombresLink(siteCss)%5%WebExtensions.CombresLink(siteJs)%6/head页面使用效果当页面中引用了很多个js、css文件时将都被合并成两个请求以达到减少HTTP请求的目的。