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

作者: Parry 來源: 博客園發布時間: 2011-01-31 13:31 閱讀: 6149 次推薦: 1 原文鏈接 [收藏]

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