• <noscript id="eom2a"><optgroup id="eom2a"></optgroup></noscript>
    <tt id="eom2a"><small id="eom2a"></small></tt>
    <input id="eom2a"></input>
  • <div id="eom2a"><small id="eom2a"></small></div>
    <td id="eom2a"><small id="eom2a"></small></td>
  • 您的位置:知識庫 ? Web前端

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

    作者: Parry  來源: 博客園  發布時間: 2011-01-31 13:31  閱讀: 6041 次  推薦: 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>

      頁面使用效果

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

    1
    0
    標簽:前端

    Web前端熱門文章

      Web前端最新文章

        最新新聞

          熱門新聞

            黄色网_免费在线黄色电影_黄色成人快播电影_伦理电影_黄色片