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 ...
随机推荐
- VB.NET Winform的一些功能实现
近段时间,开发的需要,需要写一个winform的程序.用VB.NET来写. 开发开始,需要实现一个窗体设为多文档界面 (MDI) 子窗体的容器.实现这个功能,开始找资料,得知设置一个属性:Form.I ...
- ASP.NET中Request.RawUrl、Request.Url的区别
如果访问的地址是: http://hovertree.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu 那么 ...
- jsp--- jsp图片上传到了正确路径,但在正确路径显示不出来
首先要说的是,路径里没有中文 图片也在正确路径 ************************************ 刷新(Refresh)一下项目
- 几个最常用的git命令
之前在Windows下一直用可视化的tortoise git,在Linux下最好是用命令行,以下是常用的git命令: git status:显示当前已修改的文件,新增的文件 git checkout ...
- 算法实质【Matrix67】
动态规划 :你追一个MM的时候,需要对该MM身边的各闺中密友都好,这样你追MM这个问题 就分解为对其MM朋友的问题,只有把这些问题都解决了,最终你才能追到MM. 因此,该问题适用于聪明的MM,懂得“看 ...
- android实现两个activity数据交互
android如何实现两个Activity数据交互?主要是根据Intent的携带功能,intent可以携带很多信息,比如Bundle,URI甚至对象(此时要序列化,并且对象里面的成员变量如果是对象,也 ...
- ecshop适应PHP7的修改
说实话,ecshop这个系统,到目前也没见怎么推出新版本,如果是新项目,不太建议使用它.不过,因为我一直以来都在使用中,所以不得不更改让其适应PHP新版本.现在PHP 7已经出发行版了,所以更改来继续 ...
- jQuery+turn.js翻书、文档和杂志3种特效演示
很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- Javascript获取随机数
<script type="text/javascript"> function getRandom(n,m){ var n=Number(n); //强制转换成数字 ...
- 基于 Bootstrap 的响应式后台管理面板
你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...