Hi!
I need to share my current bundle config and _Layout so that someone can correct me if I'm loading too many CSS/Scripts then needed.
BundleConfig:
public class BundleConfig{private const string KendoVersion = "2016.3.1118";public static void RegisterBundles(BundleCollection bundles){ #region Scripts bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.scrollUp.min.js", "~/Scripts/moment.min.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryMigrate").Include( "~/Scripts/jquery-migrate-3.0.0.min.js")); bundles.Add(new ScriptBundle("~/bundles/niceScroll").Include( "~/Scripts/NiceScroll/jquery.nicescroll.min.js")); bundles.Add(new ScriptBundle("~/bundles/perfectScrollbar").Include( "~/Scripts/perfect-scrollbar.jquery.min.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.min.js", "~/Scripts/respond.min.js")); bundles.Add(new ScriptBundle("~/bundles/kendo").Include( "~/Scripts/kendo/" + KendoVersion + "/kendo.all.min.js", "~/Scripts/kendo/" + KendoVersion + "/kendo.angular2.min.js", "~/Scripts/kendo/" + KendoVersion + "/kendo.aspnetmvc.min.js", "~/Scripts/kendo/" + KendoVersion + "/kendo.timezones.min.js", "~/Scripts/kendo/" + KendoVersion + "/cultures/kendo.culture.en-US-Custom.min.js", "~/Scripts/kendo/" + KendoVersion + "/jszip.min.js")); bundles.Add(new ScriptBundle("~/bundles/custom").Include( "~/Scripts/globalize.js", "~/Scripts/metisMenu.min.js", "~/Scripts/buzz.js", "~/Scripts/dist/site.js", "~/Scripts/App/Module/Common.js")); #endregion #region CSS bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.min.css", "~/Content/site.css", "~/Content/normalize.css")); bundles.Add(new StyleBundle("~/Content/custom/css").Include( "~/Content/metisMenu.min.css", "~/Content/site/site.css", "~/Content/animate.css")); bundles.Add(new StyleBundle("~/Content/kendoThemeCommon/css").Include( "~/Content/kendo/" + KendoVersion + "/kendo.common.min.css")); bundles.Add(new StyleBundle("~/Content/kendoThemeCommonBootstrap/css").Include( "~/Content/kendo/" + KendoVersion + "/kendo.common-bootstrap.min.css")); bundles.Add(new StyleBundle("~/Content/kendoThemeBootstrap/css").Include( "~/Content/kendo/" + KendoVersion + "/kendo.bootstrap.min.css")); bundles.Add(new StyleBundle("~/Content/kendoRtl/css").Include( "~/Content/kendo/" + KendoVersion + "/kendo.rtl.min.css")); bundles.Add(new StyleBundle("~/Content/kendoMobile/css").Include( "~/Content/kendo/" + KendoVersion + "/kendo.mobile.all.min.css")); bundles.Add(new StyleBundle("~/Content/kendoDataViz/css").Include( "~/Content/kendo/" + KendoVersion + "/kendo.dataviz.min.css", "~/Content/kendo/" + KendoVersion + "/kendo.dataviz-bootstrap.min.css")); #endregion bundles.IgnoreList.Clear(); //BundleTable.EnableOptimizations = true;}Layout:
<head> <meta charset="utf-8" /> <title>@ViewBag.Title - System</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, width = device-width"> <!-- css --> @Styles.Render("~/Content/css") @Styles.Render("~/Content/custom/css") @Styles.Render("~/Content/kendoThemeCommon/css") @Styles.Render("~/Content/kendoThemeCommonBootstrap/css") @Styles.Render("~/Content/kendoThemeBootstrap/css") @Styles.Render("~/Content/kendoRtl/css") @Styles.Render("~/Content/kendoMobile/css") @Styles.Render("~/Content/kendoDataViz/css") <!-- jQuery --> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryMigrate") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/niceScroll") @Scripts.Render("~/bundles/kendo") <script type="text/javascript"> kendo.culture("en-US"); </script> @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/custom") <script src="https://use.fontawesome.com/06c55d21d7.js"></script></head>Result:
I'm not getting any specific warning in console of hosting browsers but when using the Chrome's extension for Kendo, I get repeated messages regarding common.css missing. Now, I'm going for the Bootstrap style all-out. I need a all-good for the default desktop setup. I'm still a bit confused about Mobile and DataViz and DataViz Mobile. I'm about to start dashboards so I'll be loooking at mobile and DataViz too.
1 Answer, 1 is accepted
Hello Shafi,
Regarding the Kendo scripts and styles you are using, the only one that you should consider whether you are going to use it is kendo.angular2.min.js, which is deprecated and you can find more information on the topic here: http://docs.telerik.com/kendo-ui/third-party/angular2.
As for the other bundled resources (regarding Kendo UI), they seem fine and it is normal to bundle them this way. You can read more about the UI for ASP.NET MVC requirements regarding bundling here: http://docs.telerik.com/aspnet-mvc/getting-started/fundamentals#bundling.
As for Bootstrap and other third-party libraries and resources, bundling them in the project depends on the project's requirements and developers consideration. Therefore, I am unable to help much on this.
Regards,Ianko
Telerik by Progress