[轉][前端優化]使用Combres合並對js、css文件的請求

本文轉自：http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.html

在前端優化的各種金律鐵規中，“減少客戶端對資源的請求”都會在其中出現，剛好最近對網站做一些優化，使用了一下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"/>

還需要添加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>

注意：需要在項目中添加對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>    

• 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>

 要使用哪種壓縮方法，在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>

最后還需要在Global.ascx的Application_Start中添加加載的方法即可

 

1 protected void Application_Start(object sender, EventArgs e) 2 { 3     RouteTable.Routes.AddCombresRoute("Combres Route"); 4 }

 記得在Global.ascx的頭部要引入命名空間

1 <%@ Import Namespace="System.Web.Routing" %> 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>

頁面使用效果

 

當頁面中引用了很多個js、css文件時，將都被合並成兩個請求，以達到減少HTTP請求的目的。  

 

作者：Parry            出處：http://www.cnblogs.com/parry/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 

 

分類: 00.ASP.NET, 02.Web Issues