在Web开发的时候，我们很多时候，需要引用很多CSS文件、JS文件，随着使用更多的插件或者独立样式文件，可能我们的Web界面代码会越来越臃肿，看起来也很累赘，在MVC里面提供了一个Bundle的对象，用来简化页面代码非常方便，本文主要介绍在我的MVC框架里面，如何使用bundles来简化页面的代码的。
我们知道，随着使用更多的一些效果，我们可能不断引入一些新的JS和CSS文件，已达到Web界面更好的表现效果。这样也就逐步增加了文件代码的行数，造成相对比较臃肿的场景，如下面的我正常使用的Web界面，头部需要引入很多JS和CSS文件。
然后这样的文件总是在不断的复制做，非常不雅观，维护也不方便。
在ASP.NET MVC出来之后，引入了一个叫做Bundle的东西，它用来将js和css文件捆绑为一个块进行输出，能够极大简化界面代码，并默认对这些内容进行压缩处理，提高效率。
最终简化的界面代码如下所示。
为了实现上面的效果，我们需要进行几步的操作处理。
在App_Start里面的BundleConfig里面增加几行处理代码，如下所示。
上面代码，我们增加一些必要的Jquery和一些扩展给的JqueryTool的脚本和样式，方便统一化管理。
默认的情况下，Bundle是按照字母顺序进行排序的，如果需要按照增加的次序进行排序，这需要写一个自定义的排序规则进行处理，如下所示
然后在调用的时候，修改对象的排序规则即可。
接着在Global.asa.cs里面，增加对Bundle的注册，如下所示。
最后在MVC的视图里面，就可以使用Bundle来简化界面代码了。简化后的界面代码如下所示。
运行界面，虽然使用了简化版本的代码，依旧正常运行
页面代码输出则还是和原先未优化的一致。
<a href="http://www.cnblogs.com/wuhuacong/p/3281103.html">基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3317223.html">基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3343967.html">基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3344096.html">基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3352016.html">基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3361351.html">基于MVC4+EasyUI的Web开发框架形成之旅--权限控制</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3667703.html">基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669575.html">基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669708.html">基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3736564.html">基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3780356.html">基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3840321.html">基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3841338.html">基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3871991.html">基于MVC4+EasyUI的Web开发框架经验总结（8）--实现Office文档的预览</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3872890.html">基于MVC4+EasyUI的Web开发框架经验总结（9）--在Datagrid里面实现外键字段的转义操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3873498.html">基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4073203.html">基于MVC4+EasyUI的Web开发框架经验总结（11）--使用Bundles处理简化页面代码</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085682.html">基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085725.html">基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4093778.html">基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作</a>