基於對JS和CSS合並和壓縮： JAVA下有YUI Combo Handler，PHP 下有 Minify , .Net環境下有Combres。
Combres 是一個 ASP.NET 網站的客戶端資源js,css的壓縮，合成和緩存庫，基於Apache 2.0協議開源，最新版本是2.0。這個庫同時支持WebForm和MVC，主要的特性如下：
- 資源文件的組織,包括javascript和css文件的組織，每個都可以使用相同的配置或者使用不同的配置。
- 可以在資源里完成精簡，壓縮，然后發送給瀏覽器，所有的這些資源只使用一個Http請求
- 有一個可擴展的minification架構，開發人員可以選擇關閉資源壓縮的設置或選擇其中一個內置的適配器，類庫里帶了3個適配器.NET YUI Compressor library, Microsoft Ajax Minifier library和Google Closure compiler service，配置都是通過XML文件進行，非常方便。
- 對每個請求生成適當的ETag和Expires/Cache-Control 頭，支持服務器端的緩存。
- 和ASP.NET 路由引擎集成，所以對ASP.NET MVC 和ASP.NET WebForm的支持非常好。
- 支持調試模式，調試的時候不緩存也不壓縮，方便調試。
使用Combres步驟：
1. 在VS里面安裝NuGet插件。
2. 在你的Web上右鍵打開 “管理NuGet程序包” ，找到Combres，選擇安裝后 會在你的項目中做如下修改：
- 在Web.config中配置了Combres
- 注冊Combres路徑（可查看生成的AppStart文件夾下面的Combres文件）
- 在App_Data文件夾下生成了combres.xml 等相關的配置文件
3.（ASP.NET 4.0的忽略此步驟）如果是ASP.NET 3.5:
- 刪除生成的文件AppStart_Combres.cs
- 刪除引用組件WebActivator
- 打開 global.asax 添加引用 using Combres; 在 RegisterRoutes() 或者Application_Start()下添加： RouteTable.Routes.AddCombresRoute("Combres");
4.編輯App_Data文件夾下生成的配置文件： combres.xml 添加所要用的JS 和 CSS 如：
View Code
<?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"> </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"> <resource path="~/Styles/Admin.css" /> <resource path="~/Scripts/jquery-easyui-1.3/themes/default/easyui.css" /> <resource path="~/Scripts/jquery-easyui-1.3/themes/icon.css" /> </resourceSet> <resourceSet name="siteJs" type="js"> <resource path="~/Scripts/jquery-1.7.2.min.js" /> <resource path="~/Scripts/jquery-easyui-1.3/jquery.easyui.min.js" /> <resource path="~/Scripts/DropDownList.js" /> <resource path="~/Scripts/GridviewStyle.js" /> </resourceSet> <resourceSet name="subJs" type="js"> <resource path="~/Scripts/adminInfo.js" /> <resource path="~/Scripts/Validation.js" /> </resourceSet> </resourceSets> </combres>
5. 在需要的頁面添加引用：
View Code
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Admin.master.cs" Inherits="Web.Masters.Admin" %> <%@ Import namespace="Combres" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Budget Management</title> <%= WebExtensions.CombresLink("siteCss") %> <%= WebExtensions.CombresLink("siteJs") %> </head> </html>
如果是MVC：
MVC 引用
@using Combres.Mvc; <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> @Html.CombresLink("siteCss") @Html.CombresLink("siteJs") </head>
note:引用JS CSS參數保持和Combres.xml一致
附：純手工單獨配置Combres 可參考： [前端優化]使用Combres合並對js、css文件的請求