mvc bundle功能（1）

现如今都提倡敏捷开发，快速开发，但是再要求速度的同时，还得保证质量！前端我是没办法，毕竟是直接要面向用户的，但是后台，解决方案那就多了，诸如extjs，bootstrap，kendoui，都可以解决。但是使用了这些第三方的东西，我们的后台是漂亮了，效果也炫了，新的问题就来了，大量的引用js、css。

这是我用bootstrap、kendoui搭的一个标准后台，代码非常简洁，但是引用了很多样式和js，加载完这个页面发送了又16个请求，耗时1.36s。

有没有一种方法可以把这些js和css合并起来并且压缩一下呢？这样我们的后台效果不就更好了吗？当然有，.net mvc自带的bundle功能。我们先看使用了该功能之后是什么效果

很明显，请求数减少了，响应时间也减少了，那我们来看看bundle到底是如何实现的。

 public class BundleConfig
     {
         // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
         public static void RegisterBundles(BundleCollection bundles)
         {
             bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                         "~/assets/global/plugins/jquery-1.11.0.min.js"));

             // The Kendo JavaScript bundle
             bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                     "~/Scripts/kendo/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz
                     "~/Scripts/kendo/cultures/kendo.culture.zh-CN.min.js",
                     "~/Scripts/kendo/kendo.aspnetmvc.min.js"
                     ));

             // Add CSS bundle
             bundles.Add(new StyleBundle("~/bundles/upcss").IncludeDirectory("~/css/", "*.css"));

             // Add JS bundle
             bundles.Add(new ScriptBundle("~/bundles/upjs").Include("~/js/jquery.js"
                                                         , "~/js/vendor/jquery.ui.widget.js"
                                                         , "~/js/tmpl.js"
                                                         , "~/js/load-image.js"
                                                         , "~/js/canvas-to-blob.js"
                                                         , "~/js/bootstrap.js"
                                                         , "~/js/bootstrap-image-gallery.js"
                                                         , "~/js/jquery.iframe-transport.js"
                                                         , "~/js/jquery.fileupload.js"
                                                         , "~/js/jquery.fileupload-fp.js"
                                                         , "~/js/jquery.fileupload-ui.js"
                                                         , "~/js/locale.js"));
             bundles.Add(new ScriptBundle("~/bundles/upmain").IncludeDirectory("~/js/main", "*.js"));

             // The Kendo CSS bundle
             bundles.Add(new StyleBundle("~/Content/kendocss").Include(
                     "~/Content/kendo.common-bootstrap.min.css",
                     "~/Content/kendo.bootstrap.min.css",
                     "~/Content/kendo.dataviz.min.css"
                     ));

             // The Kendo CSS bundle
             bundles.Add(new Bundle("~/Content/kendo/css").Include(
                     "~/Content/kendo/kendo.common-bootstrap.min.css",
                     "~/Content/kendo/kendo.bootstrap.min.css",
                     "~/Content/kendo/kendo.dataviz.min.css"
                     ));

             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*"));

             // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
             // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
             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"));
         }
     }

首先需要首先需要配置Bundle

 public class MvcApplication : System.Web.HttpApplication
     {
         protected void Application_Start()
         {
             AreaRegistration.RegisterAllAreas();

             WebApiConfig.Register(GlobalConfiguration.Configuration);
             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
             RouteConfig.RegisterRoutes(RouteTable.Routes);
             BundleConfig.RegisterBundles(BundleTable.Bundles);
             AuthConfig.RegisterAuth();
         }
     }

再全局注册Bundles