在項目架構中，首先要引用很多css和js檔案，80%的使用者回應時間都是浪費在前端。而這些時間主要又是因為下載圖片、樣式表、JavaScript指令碼、flash等檔案造成的。減少這些資源檔的Request請求數將是提高網頁顯示效率的重點。
這裡好像有個矛盾，就是如果我減少了很多的圖片，樣式，指令碼或者flash，那麼網頁豈不是光禿禿的，那多難看呢？其實這是一個誤解。我們只是說盡量的減少，並沒有說完全不能使用。減少這些檔案的Request請求數，我們這裡主要針對js和css檔案進行最佳化，使用Combres工具
第一步準備工具Nuget可以百度，也可以在此http://nuget.org/
第二步通過VS2010管理NuGet程式包來尋找第二個工具，也就是本次要使用的工具Combres的工具。
點擊安裝後，會在項目中產生一系列的檔案和引用。
在App_Data/combres.xml，這個就是設定壓縮/合并的檔案配置。
第三步進行對設定檔進行處理，當然主要是對css檔案和Js檔案進行相關配置，修改combres.xml如下。
<?xml version="1.0" encoding="utf-8" ?><!-- This file contains basic settings needed for most web apps. For full Combres settings (with explanation), refer to the sample definition file: combres_full_with_annotation.xml Also, refer to Combres' documentation: http://combres.codeplex.com/documentation--><combres xmlns='urn:combres'> <filters> <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" /> </filters> <cssMinifiers> <minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres"> <param name="CssCompressionType" type="string" value="StockYuiCompressor" /> <param name="ColumnWidth" type="int" value="-1" /> </minifier> </cssMinifiers> <jsMinifiers> <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres" binderType="Combres.Binders.SimpleObjectBinder, Combres"> <param name="CollapseToLiteral" type="bool" value="true" /> <param name="EvalsAreSafe" type="bool" value="true" /> <param name="MacSafariQuirks" type="bool" value="true" /> <param name="CatchAsLocal" type="bool" value="true" /> <param name="LocalRenaming" type="string" value="CrunchAll" /> <param name="OutputMode" type="string" value="SingleLine" /> <param name="RemoveUnneededCode" type="bool" value="true" /> <param name="StripDebugStatements" type="bool" value="true" /> </minifier> </jsMinifiers> <!--defaultDuration 預設緩衝的時間，單位為天數--> <!--defaultVersion 合并後的資源版本，在你修改了資源檔後需要對版本進行修改，你可以指定auto或者手動設定一個版本號碼--> <!--defaultDebugEnabled 調試的模式，為true時那麼資源檔不進行壓縮，開發時可以設定成true，上線後設定成false--> <resourceSets url="~/combres.axd" defaultDuration="30" defaultVersion="auto" defaultDebugEnabled="false" defaultIgnorePipelineWhenDebug="true" localChangeMonitorInterval="30" remoteChangeMonitorInterval="60" > <resourceSet name="siteCss" type="css" minifierRef="yui"> <resource path="~/Content/Site.css" /> <resource path="~/Content/StyleSheet1.css" /> </resourceSet> <resourceSet name="siteJs" type="js"> <resource path="~/Scripts/jquery-1.5.1.min.js" minifierRef="msajax" /> <resource path="~/Scripts/test.js" minifierRef="off" /> </resourceSet> </resourceSets></combres>
這是我修改之後的檔案配置。主要是resourceSet節點下的配置。
<!--defaultDuration 預設緩衝的時間，單位為天數-->
<!--defaultVersion 合并後的資源版本，在你修改了資源檔後需要對版本進行修改，你可以指定auto或者手動設定一個版本號碼-->
<!--defaultDebugEnabled 調試的模式，為true時那麼資源檔不進行壓縮，開發時可以設定成true，上線後設定成false-->
第四步 刪除 AppStart/Combres.cs，移除WebActivetor的引用。開啟 global.asax 添加 using Combres;的引用。在 RegisterRoutes 第一行添加routes.AddCombresRoute("Combres")
第五步 在需要的視圖檔案進行引用，先來看一下未做修改前的檔案內容
<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/test.js")" type="text/javascript"></script></head>
接下來是修改之後的
@using Combres.Mvc;<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> @Html.CombresLink("siteCss") @Html.CombresLink("siteJs")</head>
siteCss和sitJs已經在上面App_Data/combres.xml進行過配置。
最後一步運行查看，這是未修改之前的
接下來看修改之後的
效果很明顯，原來的四次請求，變成了兩次請求。
範例程式碼下載
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
