第五章 MVC之Bundle詳解

一、簡述

  Bundle,英文原意就是捆、收集、歸攏。在MVC中的Bundle技術,也就是一個對css和js文件的捆綁壓縮的技術。

  它的用處:

  將多個請求捆綁為一個請求,減少服務器請求數

  壓縮javascript,css等資源文件,減小網絡帶寬,提升性能

?

  使用Bundle技術,并且擁有緩存功能,同時也可以對資源文件進行一定的模塊化管理,可使用正則對需要的文件進行過濾匹配,也可以使用cdn文件

?

二、技術詳解

1.怎么開啟bundle

在項目的App_Start文件夾中,會有一個BundleConfig.cs文件;

public class BundleConfig{// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862public static void RegisterBundles(BundleCollection bundles){bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));// 使用要用于開發和學習的 Modernizr 的開發版本。然后,當你做好// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js","~/Scripts/respond.js"));bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/site.css"));BundleTable.EnableOptimizations = true;  //是否打包壓縮
        }}

對Bundle的注冊是在項目根下的Global.asax文件中,這個文件中的Application_Start是網站程序的開始,里面注冊了網站各種初始化的內容,其中就包括對BundleTable的Bundle添加:BundleConfig.RegisterBundles(BundleTable.Bundles);

默認情況下,Bundle是會對js和css進行壓縮打包的,不過有一個屬性可以顯式的說明是否需要打包壓縮。

BundleTable.EnableOptimizations = true;

配置web.config,關掉調試狀態,否則不會進行壓縮。

<system.web><compilation debug="false" targetFramework="4.5.2" /></system.web>

2.如何使用

視圖中調用方法:

????@Styles.Render("~/Content/css")

????@Scripts.Render("~/bundles/bootstrap")

捆綁框架如以下幾個共同的約定:

  • 如果“FileX.min.js”和“FileX.js”都存在,請為發行版選擇“.min”文件。
  • 選擇用于調試的非".min"版本。
  • 忽略"-vsdoc"僅使用智能感知的文件 (如 jquery-1.7.1-vsdoc.js)。

如上所示的{version}通配符匹配用于自動創建一個 jQuery 束具有適當版本的 jQuery腳本文件夾中。在此示例中,使用通配符提供了以下好處:

  • 允許您使用 NuGet 更新到新的 jQuery 版本而無需更改前面的綁定代碼或 jQuery 引用在您查看網頁。
  • 自動選擇完整版,為調試配置和發布的".min"版本生成。

3.使用 CDN

以下代碼將使用 CDN jQuery 綁定來替換本地 jQuery 綁定。

public static void RegisterBundles(BundleCollection bundles)
{bundles.UseCdn = true;   //enable CDN support//add link to jquery on the CDNvar jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";bundles.Add(new ScriptBundle("~/bundles/jquery",jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));
}

在上面的代碼中,jQuery 將請求從 CDN 雖然在釋放模式和 jQuery 的調試版本將被回遷本地在調試模式下。當使用 CDN,你應該有一個回退機制在 CDN 請求失敗的情況下。下面的標記片段從布局文件的末尾顯示腳本添加請求 jQuery 應 CDN 失敗。

        @Scripts.Render("~/bundles/jquery")<script type="text/javascript">if (typeof jQuery == 'undefined') {var e = document.createElement('script');e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';e.type = 'text/javascript';document.getElementsByTagName("head")[0].appendChild(e);}</script> @RenderSection("scripts", required: false)

?

三、常見問題

1. css中引用的圖片路徑出現錯誤?

在css中,圖片路徑一般都是寫相對路徑,使用bundle后出現錯誤。處理方法:通過?new CssRewriteUrlTransform() 來解決

bundles.Add(new StyleBundle("~/Content/login").Include("~/Content/login.css", new CssRewriteUrlTransform()));

2. css中使用@Import "base.css" 找不到對應的文件

解決:修改為?@import url("base.css");

import的相關文章:https://segmentfault.com/a/1190000000369549

?

3.JS智能感知

?重點就是最下面的一條:~/Scripts/_references.js,這個就是默認的自定義公共js智能感知引用文件

詳細看https://www.cnblogs.com/zuqing/p/4862142.html

?

?

參考:

http://blog.csdn.net/zhou44129879/article/details/16818987

http://www.cnblogs.com/weishao/archive/2013/04/12/3015005.html

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/394496.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/394496.shtml
英文地址,請注明出處:http://en.pswp.cn/news/394496.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

所給服務器端程序改寫為能夠同時響應多個客戶端連接請求的服務器程序_一文讀懂客戶端請求是如何到達服務器的...

點擊上方“藍色字體”&#xff0c;選擇 “設為星標”關鍵訊息&#xff0c;D1時間送達&#xff01;互聯網是人類歷史上最偉大的發明創造之一&#xff0c;而構成互聯網架構的核心在于TCP/IP協議。那么TCP/IP是如何工作的呢&#xff0c;我們先從數據包開始講起。1、數據包一、HTTP…

消息服務器 推送技術,SSE服務器推送技術

SSE即 server send event 服務器發送事件&#xff0c;在在早期可能會使用ajax向服務器輪詢的方式&#xff0c;使瀏覽器第一時間接受到服務器的消息&#xff0c;但這種頻率不好控制&#xff0c;消耗也比較大。但是對于SSE來說&#xff0c;當客戶端向服務端發送請求&#xff0c;服…

Contest2162 - 2019-3-28 高一noip基礎知識點 測試5 題解版

傳送門 T1 單調棧 按照b排序 在家每一個物品時&#xff0c;判斷一下a和b的關系 如果s[sta[top]].a>s[i].b&#xff0c;就彈棧 記錄所有時候的height&#xff0c;并取最大值 T2 單調棧裸題 單調棧是干什么的&#xff1f;&#xff1f; 單調棧是記錄一個數的一側的第一個比他大…

在package.json里面的script設置環境變量,區分開發及生產環境。注意mac與windows的設置方式不一樣...

在package.json里面的script設置環境變量&#xff0c;區分開發及生產環境。 注意mac與windows的設置方式不一樣。 "scripts": {"publish-mac": "export NODE_ENVprod&&webpack -p --progress --colors","publish-win": "…

leetcode 978. 最長湍流子數組(動態規劃)

978. 最長湍流子數組 當 A 的子數組 A[i], A[i1], …, A[j] 滿足下列條件時&#xff0c;我們稱其為湍流子數組&#xff1a; 若 i < k < j&#xff0c;當 k 為奇數時&#xff0c; A[k] > A[k1]&#xff0c;且當 k 為偶數時&#xff0c;A[k] < A[k1]&#xff1b; 或 …

人工智能取代工作_人工智能正在取代人們的工作-開發人員是下一個嗎?

人工智能取代工作I was recently asked to comment on whether there was any point in becoming a developer right now, because AI might be doing your job very soon.最近有人要求我評論一下現在成為開發人員是否有任何意義&#xff0c;因為AI可能很快就會完成您的工作。 …

python類self_Python類中的self到底是干啥的

Python編寫類的時候&#xff0c;每個函數參數第一個參數都是self&#xff0c;一開始我不管它到底是干嘛的&#xff0c;只知道必須要寫上。后來對Python漸漸熟悉了一點&#xff0c;再回頭看self的概念&#xff0c;似乎有點弄明白了。首先明確的是self只有在類的方法中才會有&…

PHP中關于取模運算及符號

執行程序段<?php echo 8%(-2) ?>&#xff0c;輸出結果是&#xff1a; %為取模運算&#xff0c;以上程序將輸出0 $a%$b,其結果的正負取決于$a的符號。 echo ((-8)%3); //將輸出-2 echo (8%(-3)); //將輸出2轉載于:https://www.cnblogs.com/457248499-qq-com/p…

[pytorch] Pytorch入門

Pytorch入門 簡單容易上手&#xff0c;感覺比keras好理解多了&#xff0c;和mxnet很像&#xff08;似乎mxnet有點借鑒pytorch&#xff09;&#xff0c;記一記。 直接從例子開始學&#xff0c;基礎知識咱已經看了很多論文了。。。 import torch import torch.nn as nn import to…

無線服務器密碼讓別人改了,wifi密碼被改了怎么辦_wifi密碼被別人改了怎么辦?-192路由網...

wifi密碼被別人改了怎么辦&#xff1f;wifi密碼之所以被別人修改&#xff0c;是因為其他人知道了你路由器的登錄密碼。所以&#xff0c;如果發現自己wifi密碼被別人修改了&#xff0c;應該立刻登錄到路由器設置界面&#xff0c;修改路由器登錄密碼、修改wifi密碼、并調整wifi加…

[archlinux][hardware] 查看SSD的使用壽命

因為最近把16GB的SSD做成了HDD的cache&#xff0c;所以比較關系壽命問題。 使用smartctl工具。 參考&#xff1a;https://www.v2ex.com/t/261373 linux 下面只有 smartmontools 這一個工具&#xff0c;而且只對像三喪和 intel 這樣的大廠支持良好&#xff0c;其余的廠家文檔不全…

leetcode174. 地下城游戲(動態規劃)

一些惡魔抓住了公主&#xff08;P&#xff09;并將她關在了地下城的右下角。地下城是由 M x N 個房間組成的二維網格。我們英勇的騎士&#xff08;K&#xff09;最初被安置在左上角的房間里&#xff0c;他必須穿過地下城并通過對抗惡魔來拯救公主。 騎士的初始健康點數為一個正…

如何設置Windows版Go —快速簡便的指南

by Linda Gregier琳達格雷格(Linda Gregier) Another great language to add to your full-stack developer tool belt is the simple and productive general-purpose programming language of Go.添加到您的全棧開發人員工具帶中的另一種很棒的語言是Go的簡單而高效的通用編…

python計算現場得分_淺談用 Python 計算文本 BLEU 分數

淺談用 Python 計算文本 BLEU 分數BLEU, 全稱為 Bilingual Evaluation Understudy(雙語評估替換), 是一個比較候選文本翻譯與其他一個或多個參考翻譯的評價分數盡管 BLEU 一開始是為翻譯工作而開發, 但它也可以被用于評估文本的質量, 這種文本是為一套自然語言處理任務而生成的…

Unity的幾個特殊文件夾

1.以.開頭的文件夾會被unity忽略&#xff0c;資源不會被導入&#xff0c;腳本不會編譯。 2.Standard Assets和Pro Standard Assets&#xff1a;在這個文件夾中的腳本最先被編譯。 3.Editor&#xff1a;以Editor命名的文件夾允許其中的腳本訪問Unity Editor的API。如果腳本中使用…

怎么上傳文件到kk服務器,VS Code 關于SFTP上傳文件到多服務器的配置

工欲善其事&#xff0c;必先利其器&#xff01;剛學前端的時候一直用的DW來編寫代碼&#xff0c;其功能非常強大&#xff0c;但在Linux下不能用&#xff0c;所以就轉VS Code了。但是剛開始使用VS Code的時候&#xff0c;很多DW上的功能需要自己安裝擴展&#xff0c;并配置才可以…

CentOS7 Firewall NAT 及端口映射

本節介紹用CentOS7的Firewalll來做NAT以及端口映射實驗拓撲:因為我的環境里CentOS7上有KVM虛擬機需要共享網卡上網&#xff0c;所以我把網卡都添加到了橋里面&#xff0c;當然這里也可以不用橋&#xff0c;直接用物理網口&#xff1b;用nmcli創建橋&#xff0c;并添加網口到橋&…

JVM源碼---教你傻瓜式編譯openjdk7(JAVA虛擬機愛好者必看)

LZ經過一個星期斷斷續續的研究&#xff0c;終于成功的搞定了JDK的成功編譯與調試。盡管網絡上的教程也有不少&#xff0c;包括源碼中也有自帶的編譯步驟說明&#xff0c;但真正自己動手的話&#xff0c;還是會遇到不少意料之外的錯誤。 為了方便各位猿友編譯&#xff0c;LZ臨時…

leetcode1105. 填充書架(動態規劃)

附近的家居城促銷&#xff0c;你買回了一直心儀的可調節書架&#xff0c;打算把自己的書都整理到新的書架上。 你把要擺放的書 books 都整理好&#xff0c;疊成一摞&#xff1a;從上往下&#xff0c;第 i 本書的厚度為 books[i][0]&#xff0c;高度為 books[i][1]。 按順序 將…

python 微信bot_使用Tweepy在Python中創建Twitter Bot

python 微信botby Lucas Kohorst盧卡斯科斯特(Lucas Kohorst) 使用Tweepy在Python中創建Twitter Bot (Create a Twitter Bot in Python Using Tweepy) With about 15% of Twitter being composed of bots, I wanted to try my hand at it. I googled how to create a Twitter …