Articles → ASP .NET MVC → Bundling and Minification in asp.net mvc

Bundling and Minification in asp.net mvc






Bundling






using System.Web;
using System.Web.Optimization;

namespace MyFirstApplication {
	public class BundleConfig {
		// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
		public static void RegisterBundles(BundleCollection bundles) {
			bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

			bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));

			bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));

			// Use the development version of Modernizr to develop with and learn from. Then, when you're
			// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
			bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

			bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

			bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css"));

		}
	}
}




 <link href="~/Content/themes/base/jquery.ui.core.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.button.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.slider.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet">
 <link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet">

















Click to Enlarge





BundleTable.EnableOptimizations = true;




using System.Web;
using System.Web.Optimization;

namespace MyFirstApplication {
	public class BundleConfig {
		// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
		public static void RegisterBundles(BundleCollection bundles) {
			bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

			bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));

			bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));

			// Use the development version of Modernizr to develop with and learn from. Then, when you're
			// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
			bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

			bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

			bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css"));

			BundleTable.EnableOptimizations = true;
		}
	}
}





Click to Enlarge




How to add style and script bundling in _Layout.cshtml




@Styles.Render("~/Content/css") // ~Content/css is virtual bundle path.




@Scripts.Render("~/bundles/modernizr")



Minification





Click to Enlarge




Posted By  -  Karan Gupta
 
Posted On  -  Thursday, June 11, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250