網上查了很多壓縮css/js的方法，感覺還是用ms自己的簡便，其他的雖然功能強大，但是比較複雜，要簡單化...

在ASP.NET MVC中新建一個Web工程後，那些Bundle功能已經寫在程式碼中了，但是傳統的webform工程中怎樣使用這個Bundle壓縮功能呢？實現步驟如下：

1. 新建工程，並且為了演示，我把工程初始化成如下結構

2. 通過NuGet安裝擴充套件"Microsoft ASP.NET Web Optimization Framework"

尋找到“Microsoft ASP.NET Web Optimization Framework”的擴充套件

安裝此擴充套件,關閉此視窗
此時，解決方案中，會多出一個叫"System.Web.Optimization"的引用

void Application_Start(object sender, EventArgs e)
        {
            // 在應用程式啟動時執行的程式碼
            BundleTable.Bundles.Add(new ScriptBundle("~/resource/jquery").Include("~/Scripts/jquery-1.4.1.js"));       //1個虛擬路徑對應了1個js檔案
            BundleTable.Bundles.Add(new StyleBundle("
 
~/resource/site").Include("~/Styles/Site.css"));                  //1個虛擬路徑對應了1個css檔案
            BundleTable.Bundles.Add(new StyleBundle("~/resource/easyUITheme_default").IncludeDirectory("~/Styles/EasyuiThemes/default", "*.css", false));   //1個虛擬路徑對應了多個css檔案
            BundleTable.Bundles.Add(new StyleBundle("
 
~/resource/easyUITheme_gray").IncludeDirectory("~/Styles/EasyuiThemes/gray", "*.css", false));         //1個虛擬路徑對應了多個css檔案
            BundleTable.Bundles.Add(new StyleBundle("~/resource/easyUITheme_metro").IncludeDirectory("~/Styles/EasyuiThemes/metro", "*.css", false));       //1個虛擬路徑對應了多個css檔案
        }

上面分別定義了ScriptBundle和StyleBundle，分別是定義js和css資源的，每行的程式碼中，前面的路徑是個虛擬路徑，必須"~/"開頭，後面的路徑是真實路徑。

4. 增加test.aspx頁面

<script language="javascript" type="text/javascript" src="<%: System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/resource/jquery")%>"></script>
    <link href="<%: System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/resource/site")%>" rel="stylesheet" type="text/css" />
    <link href="<%: System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/resource/easyUITheme_default")%>" rel="stylesheet" type="text/css" />

上面3行程式碼中，ResolveBundleUrl中的引數就是在Global中寫的虛擬路徑

5. 執行效果
執行後的html程式碼：

<script language="javascript" type="text/javascript" src="/resource/jquery?v=Uhq_EnoqEUkRtNpKy2esjMsMXymBWYnOuOXfeQL60QE1"></script>
    <link href="/resource/site?v=FL58Z5KGNr5NRUTNQUr7njMc88BYdCiwMZKbAGeiiUE1" rel="stylesheet" type="text/css" />
    <link href="/resource/easyUITheme_default?v=X93-Lv0WiNBjfikEUpcvXzoKPbscp6dDibQHhy9TV4I1" rel="stylesheet" type="text/css" />

jQuery檔案壓縮後真正傳輸到客戶端的樣子如下（引數都已經被替換成一個字元了，空格等也刪除了）：

(function(n,t){function yi(){if(!i.isReady){try{r.documentElement.doScroll("left")}catch(n){setTimeout(yi,1);return}i.ready()}}function ki(n,t){t.src?i.ajax({url:t.src,async:!1,dataType:"script"}):i.globalEval(t.text||t.textContent||t.innerHTML||""),

6. 有個不方便的地方就是除錯不方便，假如要除錯js就非常不方便，因為js被壓縮了，所以需要換個方法來實現，如下
在test.aspx檔案中，用下面的程式碼替換剛才那些程式碼

<%:System.Web.Optimization.Scripts.Render("~/resource/jquery")%>
    <%:System.Web.Optimization.Styles.Render("~/resource/site")%>
    <%:System.Web.Optimization.Styles.Render("~/resource/easyUITheme_default")%>

然後更改web.config引數，debug為false：

<compilation debug="false" targetFramework="4.0" />

執行，也能實現壓縮js和css的目的，當我們需要除錯js, css時，把配置修改成這樣compilation debug="true"，就不會壓縮js和css了，很方便

壓縮前後對比

未解決的問題，相應的注意事項

 壓縮後的虛擬路徑，css中的相應圖片引用會導致問題，除了手工改動外，還不知道怎麼自動的來解決（指在使用MS Bundle技術的情況下）。