ASP.NET MVC 4使用Bundle的打包压缩JS/CSS
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS文件案中空白、批注及修改JavaScript内部函数、变量名称的压缩手法,能有效缩小文件案体积,提高传输效率,提供使用者更流畅的浏览体验。
在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度。更为重要的是通过捆绑可以解决IE浏览器的31个CSS文件连接的限制。在做ASP.Net项目时很多时候会使用一些开源的javascript控件。无形中增加了css和javascript文件的引用。如果手工将这些css文件合并将给将来版本升级造成很大的麻烦。于是,我们只好小心翼翼的处理这些css文件在页面中的引用。ASP.NET捆绑是ASP.NET 4.5的新功能,是System.Web.Optimization命名空间下。他提供了一些ASP.NET运行性能方面的优化,比如,一个页面可能有很多CSS/JS/图片,通过灵活的应用BundleTable类,他可以帮你将文件合并压缩代码优化成一个最理想的文件,然后输出到客户端,从而提高了浏览器下载速度。
首先在项目的App_Start文件夹中,会有一个BundleConfig.cs文件:
这里面写了所有需要Bundle的内容,可以自行设置:
其中的bundles.Add是在向网站的BundleTable中添加Bundle项,这里主要有ScriptBundle和StyleBundle,分别用来压缩脚本和样式表。用一个虚拟路径来初始化Bundle的实例,这个路径并不真实存在,然后在新Bundle的基础上Include项目中的文件进去。具体的Include语法可以查阅上面提供的官方简介。
然后对Bundle的注册是在项目根下的Global.asax文件中,这个文件中的Application_Start是网站程序的开始,里面注册了网站各种初始化的内容,其中就包括对BundleTable的Bundle添加:
默认情况下,Bundle是会对js和css进行压缩打包的,不过有一个属性可以显式的说明是否需要打包压缩:
BundleTable.EnableOptimizations = true;如果将其设为false,那么就会和下面说的debug=true时的情况相同了。
在使用时,在相应位置调用ScriptRender和StyleRender的Render方法:
最终用户页面即可达到效果打包压缩效果。
有一个地方主要注意,在Web.config中,当compilation编译的debug属性设为true时,表示项目处于调试模式,这时Bundle是不会将文件进行打包压缩的,页面中引用的js和css会分散原样的展示在html中,这样做是为了调试时查找问题方便(压缩以后就恶心了。。。)。
最终部署运行时,将debug设为false就可以看到js和css被打包和压缩了。
=============
使用Bundle的关键在于要向ASP.NET中的BundleTable注册Bundle。
如果要在ASP.NET WebForm中使用Bundle,需要在新建项目时选择.NET Framework 4.5,最好使用模板网站新建,这样就可以直接看到Bundle了。
ASP.NET MVC 4使用Bundle的打包压缩JS/CSS的更多相关文章
- 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css
在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)
转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和c ...
- MVC打包压缩JS&CSS文件调试时过滤了一些文件
BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件: 后台跟踪了 ...
- (转)yuicompressor 与 maven结合,打包,压缩js,css (一)
js,css代码压缩 web站点需要对js,css代码进行压缩,打包,下面是利用maven进行打包压缩的配置 将压缩后的代码打入到war包中,并且压缩后的js,css文件名不变 <plugins ...
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
该总结参考博文地址:http://www.cnblogs.com/xwgli/p/3296809.html 1.首先了解Bundle的作用:Bundles用于打包CSS和javascript脚本文件, ...
- ASP.NET MVC使用Bundle来打包压缩js和css
Bundle它是用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 1.BundleConfig配置Bundl ...
- Asp.Net MVC 捆绑(Bundle)
Asp.Net MVC 捆绑(Bundle) 大多数浏览器会对同一域名的请求限制请求数量,一般是在8个以内.每次最多可以同时请求8个,要是资源多于8个,那么剩下的就要排队等待请求了.所以为了提高首次加 ...
- webpack学习(六)打包压缩js和css
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...
- [Asp.net MVC]Bundle合并,压缩js、css文件
摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...
随机推荐
- Python学习笔记11—函数
建立第一个函数 /usr/bin/env Python #coding:utf-8 def add_function(a,b): c = a+b print c if __name__==" ...
- Android Context 是什么?
andorid 开发(42) 版权声明:本文为博主原创文章,未经博主允许不得转载. [转载请注明出处:http://blog.csdn.net/feiduclear_up CSDN 废墟的树] PS ...
- !!转!!java 简单工厂模式
举两个例子以快速明白Java中的简单工厂模式: 女娲抟土造人话说:“天地开辟,未有人民,女娲抟土为人.”女娲需要用土造出一个个的人,但在女娲造出人之前,人的概念只存在于女娲的思想里面.女娲造人,这就是 ...
- xcode黑科技
1多开模拟器 使用命令行: cd /Applications/Xcode1.app/Contents/Developer/Applications/&open -n Simulator.app ...
- IE6 + png24 透明图片(滤镜)
IE6 + png24 透明图片(滤镜) .IE6png{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true ...
- 提高PHP开发质量的36个方法(精品)
提高PHP开发质量的36个方法 林涛 发表于:2016-3-25 0:00 分类:26点 标签: 62次 1.不要使用相对路径 常常会看到: require_once('../../lib/some_ ...
- 【bzoj3160】【xsy1726】万径人踪灭
[bzoj3160]万径人踪灭 题意 给定一个由'a'和'b'构成的字符串,求不连续回文子序列的个数. \(n\leq 100000\) 分析 还是蛮不错的. 这道题基本上是自己想到的. 除了没有利用 ...
- noip2016赛后总结
面前并不是一颗变质的心. 只是一种综合并适应一切的情怀. 这或许是最好的心态... 今年的noip貌似考得好不理想呢...彻底挂了... gjs580,hgr555. 一个初三学弟570,一个400+ ...
- JavaScript ——闭包理解
昨天晚上听别人谈起闭包这个东西,虽然对js有一点了解但却丝毫没有印象,今天也没什么事就顺便研究了一下满足好奇宝宝.整合于网上的理解,记录一下. 一.闭包的作用域 要理解闭包,首先必须理解Javascr ...
- 5.6 TestNg的使用
Java语言编写的WebDriver测试程序通常使用单元测试框架运行.TestNG单元测试框架比JUnit单元测试框架更强大,它提供了更多的扩展功能.目前很大一部分自动化测试工程师已经开始 ...