首页 > 代码库 > mvc bundle功能（1）
mvc bundle功能（1）
现如今都提倡敏捷开发，快速开发，但是再要求速度的同时，还得保证质量！前端我是没办法，毕竟是直接要面向用户的，但是后台，解决方案那就多了，诸如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 bundle11 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 DataViz13 "~/Scripts/kendo/cultures/kendo.culture.zh-CN.min.js",14 "~/Scripts/kendo/kendo.aspnetmvc.min.js"15 ));16 17 // Add CSS bundle18 bundles.Add(new StyleBundle("~/bundles/upcss").IncludeDirectory("~/css/", "*.css"));19 20 // Add JS bundle21 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 bundle38 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 bundle45 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
mvc bundle功能（1）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。