从MVC4开始,我们就发现,项目中对Global.asax进行了优化,将原来在MVC3中使用的代码移到了 【App_Start】文件夹下,而Global.asax只负责初始化。其中的BundleConfig类就有个很牛X的功能:合并与压缩。想到以前做 ASP.NET的时候要通过工具压缩,手动合并,很麻烦。通过BundleConfig可以大大的提高工作效率和项目性能。

一、基本的使用

1.1、Global.asax文件的初始化

1
2
3
4
protected void Application_Start()
      {
          RouteConfig.RegisterRoutes(RouteTable.Routes);
      }

1.2、BundleConfig 绑定压缩文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class BundleConfig
{
    // 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
 
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(   
            "~/Content/Scripts/jquery-{version}.js"
           ));
 
        bundles.Add(new ScriptBundle("~/Content/Scripts/toojs").Include(
                  "~/Content/Scripts/jquery.cookie.js",
                 "~/Content/Scripts/footer.js"
             ));

1.3、视图中的显示

1
2
3
@Styles.Render("~/Content/Css/Common"//单个样式的绑定
 
@Scripts.Render("~/bundles/jquery","~/Content/Scripts/toojs","~/Content/Sctipts/bootstraptJs"//多个JS的绑定

1.4、web.config 的配置

1
2
<system.web>
    <compilation debug="true" targetFramework="4.5"/>
1
debug="false"的时候就启用的压缩

二、效果说明 

当启用压缩之后,打开firebug你会看到

多个文件在一起会被合并,文件格式去掉了,形成的压缩,提高了文件的加载时间。

我觉得还有一个很智能的好处:支持正则匹配文件

*\{version}  两个是很好的匹配,在实际项目中,在样式迭代开发时,stlye.1.0.css,stlye.1.1.css,stlye.1.2.css,stlye.1.3.css……模式累加,路径只写 ~/Content/stlye.*.css 就可以了。

在JS开发的时候很多时候改了BUG,JS有版本更 新:Script.1.0.js,Script.1.0.min.js,Script.1.1.js,Script.1.1.min.js  会使用到最新版本,用{version} debug模式下会取最新的文件,发布的时候会取最新的min

三、注意事项:

1
刚开始的时候虚拟路径的命名有就很奇怪: ~/bundles/jquery。如下:
1
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
1
bundles.Add(new ScriptBundle("~/Content/Scripts/toojs").Include(<br><br>
1
我开始以为:~/Content/Scripts 是文件的文件夹地址,后面随便命名,但~/bundles 又是什么?我们跟踪的时候发现:

1
在bundles 注册之前就有了值,原来系统已经定义好了7个路径标识,应该是默认常用的吧。这个地方坑了我好长时间了,百度也没人说~

好了,就这么多了,这节没有讲代码,就是说了下捆绑的新功能 。

asp.net mvc 应用Bundle(捆绑和微小)压缩技术 启用 BundleConfig 配置web.config的更多相关文章

  1. ASP.NET MVC下Bundle的使用

    ASP.NET MVC中Bundle是用于打包捆绑资源的(一般是css和js),它是在全局文件Global.asax.cs中注册Bundle,而注册的具体实现默认是在App_Start文件夹的Bund ...

  2. ASP.NET MVC:多语言的三种技术处理策略

    ASP.NET MVC:多语言的三种技术处理策略 背景 本文介绍了多语言的三种技术处理策略,每种策略对应一种场景,这三种场景是: 多语言资源信息只被.NET使用. 多语言资源信息只被Javascrip ...

  3. ASP.NET MVC中的捆绑和压缩技术

    概述 在众多Web性能优化的建议中有两条: 减少Http请求数量:大多数的浏览器同时处理向网站处理6个请求(参见下图),多余的请求会被浏览器要求排队等待,如果我们减少这些请求数,其他的请求等待的时间将 ...

  4. ASP.NET MVC之Bundle压缩JS和CSS

    介绍Bundle之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件 ...

  5. ASP.NET MVC使用Bundle来打包压缩js和css

    Bundle它是用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 1.BundleConfig配置Bundl ...

  6. ASP.NET MVC 3 网站优化总结(六)压缩 HTML

    压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完 ...

  7. asp.net权限控制配置web.config

    项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> ...

  8. ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...

  9. asp.net配置web.config支持jQuery.Uploadify插件上传大文件

    配置web.config有两处地方需要配置,分别是集成模式和经典模式. 集成模式: <!--文件上传大小设置--> <httpRuntime requestValidationMod ...

随机推荐

  1. Raft一致性协议

    分布式存储系统通常通过维护多个副本来进行fault-tolerance,提高系统的availability,带来的代价就是分布式存储系统的核心问题之一:维护多个副本的一致性.一致性协议就是用来干这事的 ...

  2. Nancy 学习-视图引擎 继续跨平台

    前面一篇,讲解Nancy的基础,以及Nancy自宿主,现在开始学习视图引擎. Nancy 目前支持两种 一个是SSVE 一个是Razor.下面我们一起学习. The Super Simple View ...

  3. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  4. 疯狂Android讲义 - 学习笔记(二)

    Android应用的用户界面编程 2.1 界面编程与视图(View)组件 Android应用的绝大部分UI组件放在android.widget.android.view包及其子包中,所有UI组件都继承 ...

  5. 阿里巴巴笔试整理系列 Session2 中级篇

    1知识点储备-----2笔试题总结-----3面试经验总结 知识点储备 2014年8月29日在线笔试题:20单选(40分钟内完成)+附加题(2道编程+1道问答) 1. 通过算法生成的随机数是“伪随机” ...

  6. ASP.NET MVC Model绑定的简单应用

    Model绑定是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程. 一.简单类型 1.单一值

  7. [转载]jQuery诞生记-原理与机制

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3520 一.看似偶然的 ...

  8. xwamp 目录结构设计

    xwamp 目录结构设计原文来自:http://www.xwamp.com/make/directory-structure. 目录说明 所有程序都统一放在D盘下的xwamp目录. 目录列表 Apac ...

  9. JavaScript——99乘法表

    <!DOCTYPE html> <html> <head> <title>99乘法表</title> <style type=&quo ...

  10. Swiper教程 —— 使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...