ASP.NET MVC4中對JS和CSS的引用又做了一次變化,在MVC3中我們這樣引用資原始檔:
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
將在執行的時候自動將虛擬(相對)路徑轉換為應用程式絕對路徑。這是比較傳統的引用方式,儘管他做了一次轉換操作,對伺服器的請求數量壓力並沒有什麼改進的變化,所以推測可能出於模組化設計思想和併發方面的考慮,微軟在MVC4中將這一方式做了改變:
在新建一個ASP.NETMVC4站點的時候都會在~/App_Start目錄下有一個BundleConfig.cs的啟動檔案,當然建立其他的ASP.NET4.0及4.0以上的專案也會有。這個檔案裡面包含了如下程式碼:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
這段程式碼被放在Application_Start()中執行了:
BundleConfig.RegisterBundles(BundleTable.Bundles);
上述Add方法的含義在於將網站引用資源根據實際情況進行分組引用,然後頁面部分按照如下方式來引用:
@Scripts.Render("~/bundles/jquery") @Styles.Render("~/Content/css")
在執行之後會生成常規引用程式碼,從而達到資源引用的目的。但是這個改進遠遠沒有看起來那麼簡單,我們先引用《淘寶這十年》中一段話:
生成首頁後,對Web前端稍微有點常識的人都應該知道,瀏覽器下一步會載入頁面中用到的CSS、JS(JavaScript)、圖片等樣式、指令碼和資原始檔。但是可能相對較少的人才會知道,你的瀏覽器在同一個域名下併發載入的資源數量是有限的,例如IE 6和IE 7是兩個,IE 8是6個,chrome各版本不大一樣,一般是4~6個。我剛剛看了一下,我訪問淘寶網首頁需要載入126個資源,那麼如此小的併發連線數自然會載入很久。
我們只需要將BundleTable.EnableOptimizations設定為true,MVC4就會啟用壓縮,將單次引用的資原始檔壓縮,減少請求數量和頻寬,當然在開發除錯時一般不開啟。
那麼會遇到什麼問題呢?
1. 自定義的JS不一定能成功載入。
我們一般習慣於將JS和CSS放置在一個大目錄中,因為有些時候他們是分不開的(專案規模大了除外),比如我是將EasyUI的目錄結構原原本本的放在Content目錄下,那麼刪除掉Scripts目錄和BundleConfig.cs中無關引用,新增自己的如下:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Content/jquery.min.js")); bundles.Add(new ScriptBundle("~/bundles/easyui").Include( "~/Content/jquery.easyui.min.js"));
頁面中按照上面的方式引用,結果發現根本沒有引用到,於是注意到MVC在設計這裡的功能的時候引入了萬用字元,比如
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));
可以通過版本匹配,也可以通過*號匹配但是必須放在最後,沒有提會忽略哪些字串,所以導致了上述問題。
解決方案是去掉min即可。
2.css被壓縮後,裡面圖片路徑檔案的問題。
樣式表中Content/themes/styles.css 裡圖片一般都是這樣寫的 background: url(img/bg.png),在啟用了壓縮之後路徑就會改變,所以路徑全部出現找不到資源的情況。
解決方案:對於獨立的CSS單獨分組如:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
暫時發現這2個問題,MSDN居然沒有做說明,特此記錄!