【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文件和样式文件，并使得一个捆绑中的内容在一个请求中加载。框架