现如今都提倡敏捷开发，快速开发，但是再要求速度的同时，还得保证质量！前端我是没办法，毕竟是直接要面向用户的，但是后台，解决方案那就多了，诸如extjs，bootstrap，kendoui，都可以解决。但是使用了这些第三方的东西，我们的后台是漂亮了，效果也炫了，新的问题就来了，大量的引用js、css。
这是我用bootstrap、kendoui搭的一个标准后台，代码非常简洁，但是引用了很多样式和js，加载完这个页面发送了又16个请求，耗时1.36s。
有没有一种方法可以把这些js和css合并起来并且压缩一下呢？这样我们的后台效果不就更好了吗？当然有，.net mvc自带的bundle功能。我们先看使用了该功能之后是什么效果
很明显，请求数减少了，响应时间也减少了，那我们来看看bundle到底是如何实现的。
1 public class BundleConfig 2 { 3 // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725 4 public static void RegisterBundles(BundleCollection bundles) 5 { 6 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 7 "~/assets/global/plugins/jquery-1.11.0.min.js")); 8 9 10 // The Kendo JavaScript bundle 11 bundles.Add(new ScriptBundle("~/bundles/kendo").Include( 12 "~/Scripts/kendo/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz 13 "~/Scripts/kendo/cultures/kendo.culture.zh-CN.min.js", 14 "~/Scripts/kendo/kendo.aspnetmvc.min.js" 15 )); 16 17 // Add CSS bundle 18 bundles.Add(new StyleBundle("~/bundles/upcss").IncludeDirectory("~/css/", "*.css")); 19 20 // Add JS bundle 21 bundles.Add(new ScriptBundle("~/bundles/upjs").Include("~/js/jquery.js" 22 , "~/js/vendor/jquery.ui.widget.js" 23 , "~/js/tmpl.js" 24 , "~/js/load-image.js" 25 , "~/js/canvas-to-blob.js" 26 , "~/js/bootstrap.js" 27 , "~/js/bootstrap-image-gallery.js" 28 , "~/js/jquery.iframe-transport.js" 29 , "~/js/jquery.fileupload.js" 30 , "~/js/jquery.fileupload-fp.js" 31 , "~/js/jquery.fileupload-ui.js" 32 , "~/js/locale.js")); 33 bundles.Add(new ScriptBundle("~/bundles/upmain").IncludeDirectory("~/js/main", "*.js")); 34 35 36 37 // The Kendo CSS bundle 38 bundles.Add(new StyleBundle("~/Content/kendocss").Include( 39 "~/Content/kendo.common-bootstrap.min.css", 40 "~/Content/kendo.bootstrap.min.css", 41 "~/Content/kendo.dataviz.min.css" 42 )); 43 44 // The Kendo CSS bundle 45 bundles.Add(new Bundle("~/Content/kendo/css").Include( 46 "~/Content/kendo/kendo.common-bootstrap.min.css", 47 "~/Content/kendo/kendo.bootstrap.min.css", 48 "~/Content/kendo/kendo.dataviz.min.css" 49 )); 50 51 52 bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( 53 "~/Scripts/jquery-ui-{version}.js")); 54 55 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( 56 "~/Scripts/jquery.unobtrusive*", 57 "~/Scripts/jquery.validate*")); 58 59 // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好 60 // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 61 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( 62 "~/Scripts/modernizr-*")); 63 64 bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 65 66 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 67 "~/Content/themes/base/jquery.ui.core.css", 68 "~/Content/themes/base/jquery.ui.resizable.css", 69 "~/Content/themes/base/jquery.ui.selectable.css", 70 "~/Content/themes/base/jquery.ui.accordion.css", 71 "~/Content/themes/base/jquery.ui.autocomplete.css", 72 "~/Content/themes/base/jquery.ui.button.css", 73 "~/Content/themes/base/jquery.ui.dialog.css", 74 "~/Content/themes/base/jquery.ui.slider.css", 75 "~/Content/themes/base/jquery.ui.tabs.css", 76 "~/Content/themes/base/jquery.ui.datepicker.css", 77 "~/Content/themes/base/jquery.ui.progressbar.css", 78 "~/Content/themes/base/jquery.ui.theme.css")); 79 } 80 }
首先需要首先需要配置Bundle
1 public class MvcApplication : System.Web.HttpApplication 2 { 3 protected void Application_Start() 4 { 5 AreaRegistration.RegisterAllAreas(); 6 7 WebApiConfig.Register(GlobalConfiguration.Configuration); 8 FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 9 RouteConfig.RegisterRoutes(RouteTable.Routes); 10 BundleConfig.RegisterBundles(BundleTable.Bundles); 11 AuthConfig.RegisterAuth(); 12 } 13 }
再全局注册Bundles