当前位置： 移动技术网 > IT编程>开发语言>.net > 基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍

基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍

2017年12月12日  | 移动技术网IT编程  | 我要评论
很高兴，最近项目用到了asp.net mvc4 + entity framework5，发现mvc4加入了bundle、web api等技术，着实让我兴奋，以前是用第三方的

很高兴，最近项目用到了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的配置，所有它的配置在这里进行就可以了，当然也可以单独的配置文件。

复制代码 代码如下:
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 会让我们看到他原来的面具，这点非常好利于我们调试。　　
　　　

 

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
推荐阅读
SSD-tensorflow Windows环境下，mAP的计算 SSD-tensorflow Windows环境下，mAP的计算
国密SM1\ SM2\ SM3\ SM4\ SSF33算法和国际RSA算法的对应关系 国密SM1\ SM2\ SM3\ SM4\ SSF33算法和国际RSA算法的对应关系
荐 浙大-数据结构笔记-基本概念和线性结构 荐 浙大-数据结构笔记-基本概念和线性结构
Centos7+Docker+Jenkins+ASP.NET Core 2.0自动化发布与部署的实现 Centos7+Docker+Jenkins+ASP.NET Core 2.0自动化发布与部署的实现
大家感兴趣的文章
移动技术网