做asp.net平台開發都能感覺到，微軟更新速度很快。對於這點是好是壞各人的評價不盡相同。有的認為更新快是才能及時用上最新技術，有的又覺得更新快是由於不能一次性做得最好。本文簡單講一下mvc4中關於前端的一個新功能——js與css的壓縮與合並。
在這之前，也有很多第三方工具可以來做這件事，MVC4中把該功能也集成上去了，可謂微軟真的很貼心。
mvc4中的這個功能是在System.Web.Optimization命名空間中。在MVC4的測試版跟RC版里也有所不同，這里只說RC版的。我們創建一個MVC4（RC）項目后，項目中會比以往的項目多了個App_Start目錄，里面存放3個類，BundleConfig.cs、FilterConfig.cs、RouteConfig.cs。BundleConfig.cs就是用來配置這些css、js的。這里不詳細介紹，只簡單提一提用法。取兩段簡單的代碼看一下：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
這兩個就是配置js路徑跟css路徑，當然路徑可以有多個，Include傳遞的參數為數組。可以把要添加的js跟css都放上去。在View中引用方式是：
@System.Web.Optimization.Styles.Render("~/Content/css")
@System.Web.Optimization.Scripts.Render("~/bundles/jquery")
用法也比較簡單。（MVC4測試版中稍微麻煩些，需要在Global.asax中注冊。）
好了，到這里就簡單提一下MVC4的這一新增功能。然而本文主要不是要誇它一番，而是要稍微批它一下。下面說說這個功能一個不足的地方。
我們在css中難免會用到很多背景圖片之類的，假設我們有這楊一個樣式表：
/Content/themes/default/typography.css
里面定義了一個樣式：
h1.logo{background:url(images/logo.png) top left no-repeat;} 我們引用了一張背景圖片。
背景圖片路徑為：/Content/themes/default/images/logo.png。
同樣我們將這個樣式表也添加到配置中，這樣寫：
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"," /Content/themes/default/typography.css"));
在_layout.cshtml（或者view中也行）引用 @System.Web.Optimization.Styles.Render("~/Content/css")，當我們在web.config中啟用調試模式時（<compilation debug="true" targetFramework="4.0"/>），此時打開頁面，查看網頁源文件，我們發現css代碼並沒有被壓縮，頁面中顯示的是引用了兩個css文件，此時圖片也正常顯示，沒 任何問題。但是當我們不啟用調試模式（<compilation debug="false" targetFramework="4.0"/>）時，css跟js代碼會被壓縮，不管我們里面添加了幾個css，最終會被壓縮成一個，出現類似這樣的引用：
<link href="/Content/css?v=jsX9ARrAsXtFSm5-ZAd0mrgR0YlAerOxMoONulX4Kd01" rel="stylesheet" type="text/css" /> 。打開這個路徑看css源碼，發現css樣式已經被壓縮了。這也就是我們想要得到的效果。但是此時圖片並無法找到。
為何會這樣？其實我們查看壓縮后的css代碼就可以知道了，因為壓縮后css里面引用的圖片路徑並不會改變，依然是url(images/logo.png)，那么此時css所表示的圖片路徑應該是在/Content/images/logo.png。而我們圖片真正的路徑是在：/Content/themes/default/images/logo.png。也難怪它找不到。如果壓縮后樣式是這樣寫的：h1.logo{background:url(themes/default/images/logo.png) top left no-repeat;} 就不會有問題了。可惜微軟沒做到，或者說暫時沒做到。
如果我們使用第三方組件，比如Combres來進行壓縮，完全不會有這種問題，因為它壓縮時可以重寫路徑。對於MVC4自帶壓縮功能的這個問題，我目前也只能為同一個目錄下的樣式表寫成一組，這樣當樣式表在多個目錄時頁面中就要有多個<link href="cssurl" rel="stylesheet" type="text/css" />這樣的代碼了。這樣頁面載入時就要多做幾次請求，但至少比不進行壓縮好一些就是了。整體來說對於MVC4的幾個新功能，個人覺得還是挺給力的。關於MVC4的新功能，各位可以看看微軟的官方介紹（帶視頻）：
http://weblogs.asp.net/jgalloway/archive/2012/02/16/asp-net-4-beta-released.aspx
本文來自風情波涌的博客 http://www.cnblogs.com/hahqb