[前端优化] 使用Combres合并对js、css文件的请求

2021年1月12日   |   by tgcode

  在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文。

  园子中也有几篇Combres组件的介绍,如:Combres库学习小结以及部分源码分析使用Combres 库 ASP.NET 网站优化。可部署时参考起来显得有些简略,所以此文也算对此类文章的补充。

  配置组件

  此组件的一些作用和原理在我上面提及的两篇文章中有介绍,可以自行移步至对应的文章中查看。这里还有有作者介绍的一些详细的使用方法

  下载Combres组件,下载下来的包里包含了DLL、帮助文件、源码和一些例子,我们现在直接来看如何部署。

  在下载下来的Binarymerged中有一个Combres.dll,在readme文件中得知其对可能要用到的dll都进行了打包,如Combres.dll、fasterflect.dll、log4net.dll、ajaxmin.dll、 yahoo.yui.compressor.dll等等。

  在项目中引用此dll,下面来配置下配置文件。

  首先配置下web.config。

  在configSections配置节下添加:

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.tgcodecom/

–>1sectionname=”combres”type=”Combres.ConfigSectionSetting,Combres,Version=2.0.0.0,Culture=neutral,PublicKeyToken=49212d24adfbe4b4″/>

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

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1combresdefinitionUrl=”~/App_Data/combres.xtgcodeml”/>

  配置好了后应该像这样:

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/tgcode

–>1configSections>
2sectionname=”combres”type=”Combres.ConfigSectionSetting,Combres,
3Version=2.0.0.0,Culture=neutral,PublicKeyToken=49212d24adfbe4b4″/>
4configSections>
5combresdefinitionUrl=”~/App_Data/combres.xml”/>

  还需要添加httpModules的节点:

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1httpModules>
2addname=”UrlRoutingModule”type=”System.Web.Routing.UrlRoutingModule,
3System.Web.Routing,Version=3.5.0.0,Culture=neutral,
4PublicKeyToken=31BF3856AD364E35″/>
5httpModules>

  注意:需要在项目中添加对System.Web.Routing的引用。

  下面来配置Combres的配置文件,按照上面的路径配置,我们就在App_Data下添加combres.xml文件。

  添加如下格式的配置文件。

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1xmlversion=”1.0″encoding=”utf-8″?>
2combresxmlns=’urn:combres’>
3resourceSetsurl=”~/combres.axd”defaultDuration=”30″
4defaultVersion=”auto”
5defaultDebugEnabled=”auto”>
6resourceSetname=”siteCss”type=”css>
7resourcepath=”~/styles/site.css”/>
8resourcepath=”~/styles/jquery-ui-1.7.2.custom.css”/>
9resourceSet>
10resourceSetname=”siteJs”type=”js”>
11resourcepath=”~/scripts/jquery-1.3.2.js”/>
12resourcepath=”~/scripts/jquery-ui-1.7.2.custom.min.js”/>
13resourceSet>
14resourceSets>
15combres>

  • defaultDuration 默认缓存的时间,单位为天数
  • defaultVersion 合并后的资源版本,在你修改了资源文件后需要对版本进行修改,你可以指定auto或者手动设置一个版本号
  • defaultDebugEnabled 调试的模式,为true时那么资源文件不进行压缩,开发时可以设置成true,上线后设置成false

  具体添加压缩方法的配置节点,用于选择哪种方法对资源文件进行压缩:

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1cssMinifiers>
2minifiername=”yui”type=”Combres.Minifiers.YuiCssMinifier,Combres”>
3paramname=”CssCompressionType”type=”string”value=”StockYuiCompressor”/>
4paramname=”ColumnWidth”type=”int”value=”-1″/>
5minifier>
6cssMinifiers>
7jsMinifiers>
8minifiername=”msajax”type=”Combres.Minifiers.MSAjaxJSMinifier,Combres”
9binderType=”Combres.Binders.SimpleObjectBinder,Combres”>
10paramname=”CollapseToLiteral”type=”bool”value=”true”/>
11paramname=”EvalsAreSafe”type=”bool”value=”true”/>
12paramname=”MacSafariQuirks”type=”bool”value=”true”/>
13paramname=”CatchAsLocal”type=”bool”value=”true”/>
14paramname=”LocalRenaming”type=”string”value=”CrunchAll”/>
15paramname=”OutputMode”type=”string”value=”SingleLine”/>
16paramname=”RemoveUnneededCode”type=”bool”value=”true”/>
17paramname=”StripDebugStatements”type=”bool”value=”true”/>
18minifier>
19jsMinifiers>

  要使用哪种压缩方法,在resourceSet或者在resource上添加相应的属性即可,配置后像下面这样:

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1xmlversion=”1.0″encoding=”utf-8″?>
2combresxmlns=’urn:combres’>
3cssMinifiers>
4minifiername=”yui”type=”Combres.Minifiers.YuiCssMinifier,Combres”>
5paramname=”CssCompressionType”type=”string”value=”StockYuiCompressor”/>
6paramname=”ColumnWidth”type=”int”value=”-1″/>
7minifier>
8cssMinifiers>
9jsMinifiers>
10minifiername=”msajax”type=”Combres.Minifiers.MSAjaxJSMinifier,Combres”
11binderType=”Combres.Binders.SimpleObjectBinder,Combres”>
12paramname=”CollapseToLiteral”type=”bool”value=”true”/>
13paramname=”EvalsAreSafe”type=”bool”value=”true”/>
14paramname=”MacSafariQuirks”type=”bool”value=”true”/>
15paramname=”CatchAsLocal”type=”bool”value=”true”/>
16paramname=”LocalRenaming”type=”string”value=”CrunchAll”/>
17paramname=”OutputMode”type=”string”value=”SingleLine”/>
18paramname=”RemoveUnneededCode”type=”bool”value=”true”/>
19paramname=”StripDebugStatements”type=”bool”value=”true”/>
20minifier>
21jsMinifiers>
22resourceSetsurl=”~/combres.axd”defaultDuration=”30″
23defaultVersion=”auto”
24defaultDebugEnabled=”auto”>
25resourceSetname=”siteCss”type=”css”minifierRef=”yui”>
26resourcepath=”~/styles/site.css”/>
27resourcepath=”~/styles/jquery-ui-1.7.2.custom.css”/>
28resourceSet>
29resourceSetname=”siteJs”type=”js”>
30resourcepath=”~/scripts/jquery-1.3.2.js”minifierRef=”msajax”/>
31resourcepath=”~/scripts/jquery-ui-1.7.2.custom.min.js”minifierRef=”off”/>
32resourceSet>
33resourceSets>
34combres>

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

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1protectedvoidApplication_Start(objectsender,EventArgse)
2{
3RouteTable.Routes.AddCombresRoute(CombresRoute);
4}

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

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1@ImportNamespace=System.Web.Routing%>
2@ImportNamespace=Combres%>

  页面使用

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1@ImportNamespace=Combres%>
2headrunat=”server>
3title>UsingCombrestitle>
4=WebExtensions.CombresLink(siteCss)%>
5=WebExtensions.CombresLink(siteJs)%>
6head>

  页面使用效果

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

相关推荐: 什么是Node.js?

  译文全文:http://jayli.github.com/whatisnode/index.html  作者:Brett McLaughlin ,原文:What is Node?   Node不是万能药!但的确能解决一些关键问题。   学习Node不是一件…

Tags: , , ,