第五章 MVC之Bundle详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第五章 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=301862
        public 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 CDN
    var 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

 

 

参考:

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

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

 

以上是关于第五章 MVC之Bundle详解的主要内容,如果未能解决你的问题,请参考以下文章

构建之法第第五章读后感

《构建之法》第五章学习总结

构建之法第五章学习

jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

java第五章:面向对象(oop)三大特性之多态

《构建之法》第五章读书笔记