打包(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了。
相关文章
- 11-13ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
- 11-13ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
- 11-13在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)
- 11-13(转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能
- 11-13ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render
- 11-13ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
- 11-13【转】ASP.NET MVC 4 RC的JS/CSS打包压缩功能
- 11-13ASP.NET MVC 4 RC的JS/CSS打包压缩功能
- 11-13ASP.NET MVC 中CSS JS压缩合并 功能的使用方法
- 11-13ASP.NET MVC中使用Bundle打包压缩js和css的方法