asp.net mvc 应用Bundle(捆绑和微小)压缩技术 启用 BundleConfig 配置web.config
从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的更多相关文章
- ASP.NET MVC下Bundle的使用
ASP.NET MVC中Bundle是用于打包捆绑资源的(一般是css和js),它是在全局文件Global.asax.cs中注册Bundle,而注册的具体实现默认是在App_Start文件夹的Bund ...
- ASP.NET MVC:多语言的三种技术处理策略
ASP.NET MVC:多语言的三种技术处理策略 背景 本文介绍了多语言的三种技术处理策略,每种策略对应一种场景,这三种场景是: 多语言资源信息只被.NET使用. 多语言资源信息只被Javascrip ...
- ASP.NET MVC中的捆绑和压缩技术
概述 在众多Web性能优化的建议中有两条: 减少Http请求数量:大多数的浏览器同时处理向网站处理6个请求(参见下图),多余的请求会被浏览器要求排队等待,如果我们减少这些请求数,其他的请求等待的时间将 ...
- ASP.NET MVC之Bundle压缩JS和CSS
介绍Bundle之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件 ...
- ASP.NET MVC使用Bundle来打包压缩js和css
Bundle它是用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 1.BundleConfig配置Bundl ...
- ASP.NET MVC 3 网站优化总结(六)压缩 HTML
压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完 ...
- asp.net权限控制配置web.config
项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> ...
- ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件
今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...
- asp.net配置web.config支持jQuery.Uploadify插件上传大文件
配置web.config有两处地方需要配置,分别是集成模式和经典模式. 集成模式: <!--文件上传大小设置--> <httpRuntime requestValidationMod ...
随机推荐
- Raft一致性协议
分布式存储系统通常通过维护多个副本来进行fault-tolerance,提高系统的availability,带来的代价就是分布式存储系统的核心问题之一:维护多个副本的一致性.一致性协议就是用来干这事的 ...
- Nancy 学习-视图引擎 继续跨平台
前面一篇,讲解Nancy的基础,以及Nancy自宿主,现在开始学习视图引擎. Nancy 目前支持两种 一个是SSVE 一个是Razor.下面我们一起学习. The Super Simple View ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- 疯狂Android讲义 - 学习笔记(二)
Android应用的用户界面编程 2.1 界面编程与视图(View)组件 Android应用的绝大部分UI组件放在android.widget.android.view包及其子包中,所有UI组件都继承 ...
- 阿里巴巴笔试整理系列 Session2 中级篇
1知识点储备-----2笔试题总结-----3面试经验总结 知识点储备 2014年8月29日在线笔试题:20单选(40分钟内完成)+附加题(2道编程+1道问答) 1. 通过算法生成的随机数是“伪随机” ...
- ASP.NET MVC Model绑定的简单应用
Model绑定是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程. 一.简单类型 1.单一值
- [转载]jQuery诞生记-原理与机制
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3520 一.看似偶然的 ...
- xwamp 目录结构设计
xwamp 目录结构设计原文来自:http://www.xwamp.com/make/directory-structure. 目录说明 所有程序都统一放在D盘下的xwamp目录. 目录列表 Apac ...
- JavaScript——99乘法表
<!DOCTYPE html> <html> <head> <title>99乘法表</title> <style type=&quo ...
- Swiper教程 —— 使用方法
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...