基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍
2013-04-12 00:00
951 查看
很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle、Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术。
很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处:
将多个请求捆绑为一个请求,减少服务器请求数
没有使用Bundle技术,debug下看到的是实际的请求数与路径
使用Bundle技术,并且拥有缓存功能
调试设置为Release模式并按F5或修改web.config,就可以看到合并与压缩的效果
压缩javascript,css等资源文件,减小网络带宽,提升性能
后台配置
MVC4在架构上有些变动,简化了原来的Global.asax,增加了一些静态的配置文件在App_Start下面,留意下BundleConfig.cs,顾名思义是Bundle的配置,所有它的配置在这里进行就可以了,当然也可以单独的配置文件。
这里大家可以按模块化去配置,我们看到的下面的Url对应的就是上面的bundles.Add(...) 所增加的js、css的virtualPath
需要注意的是不同virtualPath 增加的相同的资源文件,会被重复加载!
前台调用
对于公共的资源文件,通常我们都会放到_Layout.cshtml (webform中的母板页) 文件中
Script文件引用:@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
CSS文件引用: @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
正则匹配需要的,过滤不需要的
使用CDN
当cdn服务器挂了或不能访问了,这里就会选择本地的资源文件,debug下mvc 会让我们看到他原来的***,这点非常好利于我们调试。
很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处:
将多个请求捆绑为一个请求,减少服务器请求数
没有使用Bundle技术,debug下看到的是实际的请求数与路径
使用Bundle技术,并且拥有缓存功能
调试设置为Release模式并按F5或修改web.config,就可以看到合并与压缩的效果
压缩javascript,css等资源文件,减小网络带宽,提升性能
后台配置
MVC4在架构上有些变动,简化了原来的Global.asax,增加了一些静态的配置文件在App_Start下面,留意下BundleConfig.cs,顾名思义是Bundle的配置,所有它的配置在这里进行就可以了,当然也可以单独的配置文件。
public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); } }
这里大家可以按模块化去配置,我们看到的下面的Url对应的就是上面的bundles.Add(...) 所增加的js、css的virtualPath
需要注意的是不同virtualPath 增加的相同的资源文件,会被重复加载!
前台调用
对于公共的资源文件,通常我们都会放到_Layout.cshtml (webform中的母板页) 文件中
Script文件引用:@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
CSS文件引用: @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css") ...@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @RenderSection("scripts", required: false)
正则匹配需要的,过滤不需要的
bundles.IgnoreList.Clear(); bundles.IgnoreList.Ignore("*.debug.js"); bundles.IgnoreList.Ignore("*.min.js"); bundles.IgnoreList.Ignore("*-vsdoc.js"); bundles.IgnoreList.Ignore("*intellisense.js"); bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js")); //匹配jquery版本 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", //匹配文件名前缀为jquery.unobtrusive "~/Scripts/jquery.validate*")); ...
使用CDN
bundles.UseCdn = true; //使用CDN string jqueryCdn = "http:deom.jb51.net/jslib/jquery/jquery-1.7.1.min.js"; bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js"));
当cdn服务器挂了或不能访问了,这里就会选择本地的资源文件,debug下mvc 会让我们看到他原来的***,这点非常好利于我们调试。
相关文章推荐
- 基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍
- Asp.Net MVC4 Bundle捆绑压缩技术
- Asp.Net MVC4 Bundle捆绑压缩技术
- Asp.Net MVC4 Bundle捆绑压缩技术
- asp.net mvc 应用Bundle(捆绑和微小)压缩技术 启用 BundleConfig 配置web.config
- MVC(BundleConfig) 压缩捆绑技术,减少页面请求,优化客户体验。
- MVC4商城项目四:应用Bundle捆绑压缩技术
- ASP.NET MVC4 捆绑(Bundle)技术下的 JavaScript 推荐
- MVC4商城项目四:应用Bundle捆绑压缩技术
- Oracle 表压缩(Table Compression)技术介绍
- 介绍一种基于gulp对seajs的模块做合并压缩的方式
- 实时系统解决方案 TIBCO Rendezvous — 技术介绍(消息中间件|基于数据库的主动推送)
- 基于DM642的MPEG-2视频压缩编码之硬件设计和CCS开发环境的介绍
- 实时系统解决方案 TIBCO Rendezvous — 技术介绍(消息中间件|基于数据库的主动推送)
- Asp.Net MVC4 BundleTable 之 Javascript和css 打包压缩
- 基于小波变换的图像压缩技术初探
- 基于Backbone.js,REST技术的瘦服务端架构介绍(转)
- [AI 技术文章之其三] 基于神经网络的图像压缩技术
- ASP.NET MVC4中的App_start中BundleConfig的介绍使用
- 基于ASP.net C#技术来实现,介绍如何处理Session对象变量失效的问题