1. 程式人生 > >解決MVC中使用BundleConfig.RegisterBundles引用Css及js文件發布後丟失的問題

解決MVC中使用BundleConfig.RegisterBundles引用Css及js文件發布後丟失的問題

找不到 變化 獨立 validate 文件過濾 但是 config 淘寶網 虛擬

ASP.NET MVC4,ASP.NET MVC5中對JS和CSS的引用又做了一次變化,在MVC3中我們這樣引用資源文件:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"   type="text/css" />

將在運行的時候自動將虛擬(相對)路徑轉換為應用程序絕對路徑。這是比較傳統的引用方式,盡管他做了一次轉換操作,對服務器的請求數量壓力並沒有什麽改進的變化,所以推測可能出於模塊化設計思想和並發方面的考慮,微軟在MVC4,MVC5中將這一方式做了改變:

在新建一個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方法的含義在於將網站引用資源根據實際情況進行分組引用,然後頁面部分按照如下方式來引用:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")

在運行之後會生成常規引用代碼,從而達到資源引用的目的。但是這個改進遠遠沒有看起來那麽簡單,我們先引用《淘寶這十年》中一段話:

生成首頁後,對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即可。

BundleTable.Bundles.IgnoreList.Clear();
BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);
讓他去除對這些文件過濾限制

2.css被壓縮後,裏面圖片路徑文件的問題。

樣式表中Content/themes/styles.css 裏圖片一般都是這樣寫的 background: url(img/bg.png),在啟用了壓縮之後路徑就會改變,所以路徑全部出現找不到資源的情況。

解決方案:對於獨立的CSS單獨分組如:

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

3.項目發布後Css樣式及Js腳本引用丟失。

項目中使用@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery")方式引用的樣式或腳本文件在發布後出現丟失的情況,頁面打開後樣式全亂了,但是調試的時候卻是正常的。查了一下原因是這麽說的:

默認本地vs裏面調試的時候,因為web.config文件裏面有一個debug屬性,當有此屬性時,默認css和js是不會壓縮的,此時加載的js也是不支持.min.js這種的
,加載的都是不帶min的js文件!而當發布到iis後,web.config裏面沒有debug屬性了,此時css和js是會自動啟用壓縮功能,壓縮後的css裏面若沒有指定圖片相對於網站的根目錄的路徑
的話,圖片也是沒辦法正常顯示的,js此時也會只加載有.min的文件。

解決方案:

在綁定文件BundleConfig的方法RegisterBundles下設置屬性:

BundleTable.EnableOptimizations = false;

問題解決。

解決MVC中使用BundleConfig.RegisterBundles引用Css及js文件發布後丟失的問題