[前端优化] 使用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配置节下添加:
在configuration配置节下添加Combres配置文件的路径,此文件的作用我们下面再说。
配置好了后应该像这样:
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的节点:
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文件。
添加如下格式的配置文件。
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
具体添加压缩方法的配置节点,用于选择哪种方法对资源文件进行压缩:
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上添加相应的属性即可,配置后像下面这样:
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中添加加载的方法即可:
2 {
3 RouteTable.Routes.AddCombresRoute("Combres Route");
4 }
记得在Global.ascx的头部要引入命名空间:
2 <%@ 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请求的目的。