MVC bundle Function (1)

Now we are advocating agile development, rapid development, but the speed of demand, but also to ensure quality! Front-end I was no way, after all, is directly to the user-oriented, but backstage, the solution that is more, such as Extjs,bootstrap,kendoui, can be solved. But the use of these third-party things, our backstage is beautiful, the effect is also dazzling, the new problem is coming, a lot of reference JS, CSS.

This is my use of bootstrap, Kendoui a standard background, the code is very concise, but the reference to a lot of styles and JS, loading this page sent another 16 requests, time consuming 1.36s.

Is there a way to combine these JS and CSS and compress it? So our backstage effect is not better? Of course,. NET MVC comes with the bundle feature. Let's start by looking at what the effect is after using this function.

Obviously, the number of requests is reduced and the response time is reduced, so let's look at how bundles are implemented.

1  Public classBundleconfig2     {3         //For more information about bundling, please visit thehttp://go.microsoft.com/fwlink/?LinkId=2547254          Public Static voidregisterbundles (bundlecollection bundles)5         {6Bundles. ADD (NewScriptbundle ("~/bundles/jquery"). Include (7                         "~/assets/global/plugins/jquery-1.11.0.min.js"));8 9 Ten             //The kendo JavaScript bundle OneBundles. ADD (NewScriptbundle ("~/bundles/kendo"). Include ( A                     "~/scripts/kendo/kendo.all.min.js",//or kendo.all.* If you want to the use Kendo UI Web and Kendo UI DataViz -                     "~/scripts/kendo/cultures/kendo.culture.zh-cn.min.js", -                     "~/scripts/kendo/kendo.aspnetmvc.min.js" the                     )); -  -             //ADD CSS Bundle -Bundles. ADD (NewStylebundle ("~/bundles/upcss"). Includedirectory ("~/css/","*.css")); +  -             //ADD JS Bundle +Bundles. ADD (NewScriptbundle ("~/bundles/upjs"). Include ("~/js/jquery.js" A,"~/js/vendor/jquery.ui.widget.js" at,"~/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" in,"~/js/jquery.fileupload.js" -,"~/js/jquery.fileupload-fp.js" to,"~/js/jquery.fileupload-ui.js" +,"~/js/locale.js")); -Bundles. ADD (NewScriptbundle ("~/bundles/upmain"). Includedirectory ("~/js/main","*.js")); the  *  $ Panax Notoginseng             //The kendo CSS bundle -Bundles. ADD (NewStylebundle ("~/content/kendocss"). Include ( the                     "~/content/kendo.common-bootstrap.min.css", +                     "~/content/kendo.bootstrap.min.css", A                     "~/content/kendo.dataviz.min.css" the                     )); +  -             //The kendo CSS bundle $Bundles. ADD (NewBundle ("~/content/kendo/css"). Include ( $                     "~/content/kendo/kendo.common-bootstrap.min.css", -                     "~/content/kendo/kendo.bootstrap.min.css", -                     "~/content/kendo/kendo.dataviz.min.css" the                     )); - Wuyi  theBundles. ADD (NewScriptbundle ("~/bundles/jqueryui"). Include ( -                         "~/scripts/jquery-ui-{version}.js")); Wu  -Bundles. ADD (NewScriptbundle ("~/bundles/jqueryval"). Include ( About                         "~/scripts/jquery.unobtrusive*", $                         "~/scripts/jquery.validate*")); -  -             //Develop and understand information using the development version of MODERNIZR. And then, when you're done -             //when preparing your production, usehttp://modernizr.comto select only the tests that you want on the build tool.  ABundles. ADD (NewScriptbundle ("~/bundles/modernizr"). Include ( +                         "~/scripts/modernizr-*")); the  -Bundles. ADD (NewStylebundle ("~/content/css"). Include ("~/content/site.css")); $  theBundles. ADD (NewStylebundle ("~/content/themes/base/css"). Include ( the                         "~/content/themes/base/jquery.ui.core.css", the                         "~/content/themes/base/jquery.ui.resizable.css", the                         "~/content/themes/base/jquery.ui.selectable.css", -                         "~/content/themes/base/jquery.ui.accordion.css", in                         "~/content/themes/base/jquery.ui.autocomplete.css", the                         "~/content/themes/base/jquery.ui.button.css", the                         "~/content/themes/base/jquery.ui.dialog.css", About                         "~/content/themes/base/jquery.ui.slider.css", the                         "~/content/themes/base/jquery.ui.tabs.css", the                         "~/content/themes/base/jquery.ui.datepicker.css", the                         "~/content/themes/base/jquery.ui.progressbar.css", +                         "~/content/themes/base/jquery.ui.theme.css")); -         } the}

First you need to configure the bundle first

1  Public classMvcApplication:System.Web.HttpApplication2     {3         protected voidApplication_Start ()4         {5 Arearegistration.registerallareas ();6 7 Webapiconfig.register (globalconfiguration.configuration);8 filterconfig.registerglobalfilters (globalfilters.filters);9 routeconfig.registerroutes (routetable.routes);Ten bundleconfig.registerbundles (bundletable.bundles); One Authconfig.registerauth (); A         } -}

Global Registration Bundles

MVC bundle Function (1)