mvc bundle功能（1）

浏览数：49 / 时间：2015年06月09日

现如今都提倡敏捷开发，快速开发，但是再要求速度的同时，还得保证质量！前端我是没办法，毕竟是直接要面向用户的，但是后台，解决方案那就多了，诸如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     }