轉載地址：https://www.cnblogs.com/xiaoerlang90/p/5566817.html

解決MVC中使用BundleConfig.RegisterBundles引用Css及js檔案釋出後丟失的問題

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即可。

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;

問題解決。

文章參考引自：http://www.cnblogs.com/madyina/p/3702314.html

博文推薦：.NET/ASP.NET 4.5 Bundle元件（捆綁、縮小靜態檔案）　　　　　

　　　MVC bundle的使用總結