關於MVC中BundleCollection壓縮js css文件 發佈後獲取失敗的問題

来源:http://www.cnblogs.com/yinniannian/archive/2017/09/26/7596578.html
-Advertisement-
Play Games

ASP.NET MVC4,ASP.NET MVC5中對JS和CSS的引用又做了一次變化,在MVC3中我們這樣引用資源文件: 將在運行的時候自動將虛擬(相對)路徑轉換為應用程式絕對路徑。這是比較傳統的引用方式,儘管他做了一次轉換操作,對伺服器的請求數量壓力並沒有什麼改進的變化,所以推測可能出於模塊化設 ...


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;

問題解決。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 將String[]類型的Object類型,轉換為String[]類型: 使用 is 進行判斷 ob 是否為 string[] 類型。 將 string 類型轉換為 DateTime 類型: 註意: 使用 DateTime.TryParse(); 進行轉換判斷時,如果返回 true,強制轉換結果將傳入 ...
  • 本文首先介紹Kd-Tree的構造方法,然後介紹Kd-Tree的搜索流程及代碼實現,最後給出本人利用C#語言實現的二維KD樹代碼。這也是我自己動手實現的第一個樹形的數據結構。理解上難免會有偏差,敬請各位多多斧正。 ...
  • 利用三層架構實現對資料庫數據的分頁功能和點擊每個頁碼實現不同分頁面之間的跳轉 ...
  • 本文主要記錄我在學習C#中foreach遍歷原理的心得體會。 對集合中的要素進行遍歷是所有編碼中經常涉及到的操作,因此大部分編程語言都把此過程寫進了語法中,比如C#中的foreach。經常會看到下麵的遍歷代碼: 實際此代碼的執行過程: 會發現有GetEnumerator()方法和IEnumerato ...
  • 參考:http://www.cnblogs.com/kissdodog/archive/2013/05/11/3072832.html namespace 結構{ //結構是值類型,在棧中分配空間;棧中保存的只是引用。直接包含它自己的數據,每個結構都保存自己的一份數據,修改每一個結構的數據都不會對其 ...
  • namespace 常量_枚舉_結構{ //將枚舉聲明到命名空間的下麵,類的上面。 //美劇就是一個變數類型,只是他聲明,賦值,使用的方式與那些普通的不一樣 //定義了一個枚舉 public enum Gender { 男, 女 } public enum QQState { 線上, 離線, 隱身, ...
  • 參考:https://github.com/NLog/NLog/wiki/Tutorial 步驟: 1. 使用Nuget安裝NLog.Extensions.Logging 2.編寫代碼(到這步運行代碼,不報錯,但是也不會有log輸出,因為沒有設置配置文件) 3. 編寫配置文件 在項目下新增加NLog ...
  • namespace params可變參數{ class Program { static void Main(string[] args) { int[] num = {66,99,55,44, }; Test("老王",num); Test("老王",55,55,55); //從方法哪裡的參數可以 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...