ASP.NET 4.0 Webform傳統開發模式下如何壓縮css, js

網上查了很多壓縮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"的引用

3. 修改Global檔案，加入Bundle資源的代碼

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技術的情況下）。