【ASP.NET MVC 學習筆記】- 18 Bundle（捆綁）

時間 2019-11-11

標籤 asp.net asp mvc 學習筆記 bundle 捆綁欄目 ASP 简体版

原文原文鏈接

本文參考：http://www.cnblogs.com/willick/p/3438272.htmlcss

一、捆綁（Bundle），一個在 View 和 Layout 中用於組織優化瀏覽器請求的 CSS 和 JavaScript 文件的技術。html

二、當咱們建立一個MVC工程時，VS在Scripts文件夾下默認引入瞭如下js：前端

jquery-1.8.2.js，這個就不用解釋了。
jquery-ui-1.8.24.js，在jQuery 基礎上的一套界面工具，包括了網頁上常見的不少插件和動畫特效。
jquery.validate.js，用於驗證用戶在表單內input元素輸入的數據。
knockout-2.2.0.js，是一個輕量級的UI類庫，經過應用MVVM模式使JavaScript前端UI簡單化。
modernizr-2.6.2.js，一個開源的JS庫，它使得那些基於訪客瀏覽器的不一樣（指對新標準支持性的差別）而開發不一樣級別體驗的設計師的工做變得更爲簡單。它使得設計師能夠在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其餘不支持這些新技術的瀏覽器的控制。
jquery.unobtrusive-ajax.js，MVC 框架中使用 Unobtrusive Ajax 的庫。
jquery.validate.unobtrusive.js，基於 jquery.unobtrusive-ajax.js。
_references.js，它的做用是經過下面這種方式放入該文件中的JS文件能夠被VS智能感知：

/// <reference path="jquery-1.7.1.js" />
/// <reference path="jquery-ui-1.8.20.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="knockout-2.1.0.debug.js" />
/// <reference path="modernizr-2.5.3.js" />

二、「捆綁」做用是把一類腳本或樣式文件捆綁在一塊兒，在須要用的時候調用一句代碼就行，極大地方便了腳本和樣式文件的管理；並且能夠把腳本的普通和 min 兩個版本都捆綁起來，MVC也會根據是否爲Debug模式智能地選擇腳本文件的版本。jquery

三、使用Bundle的方便之一：能夠在 /App_Start/BundleConfig.cs 中經過註冊來統一管理腳本和樣式文件。ajax

public class BundleConfig {
    //RegisterBundles 參數對象的 Add 方法添加，該方法的參數須要一個ScriptBundle 類 或 StyleBundle 類的實例對象。
 //腳本文件用的是 ScriptBundle 類，樣式文件用的是 StyleBundle 類，它們的構造參數表明着捆綁在一塊兒的文件的引用。 
 //Include 方法用於包含具體要捆綁的文件。其中的 {version} 是文件版本的佔位符，MVC會在相應的目錄下定位到最新的一個版本文件。 public static void RegisterBundles(BundleCollection bundles) {
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.css"));

        bundles.Add(new ScriptBundle("~/bundles/clientfeaturesscripts").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js"));
    }
}

方便之二：不用引入一大坨js、css文件，而是經過下列優雅的方式進行：瀏覽器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
</head>
<body>
    @Scripts.Render("~/bundles/clientfeaturesscripts")
    @RenderBody()
</body>
</html>

方便之三：減小帶寬並使捆綁請求的連接減小。在發佈模式下，響應客戶端請求時，MVC整合並最小化了JavaScript文件和樣式文件，並使得一個捆綁中的內容在一個請求中加載。框架

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。