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">




  1. Press F12 to open developer tool.
  2. Go to Network tab
  3. Click on ‘Start Capturing’ button.
  4. Refresh the page
  5. Click on ‘Stop Capturing’ button


Picture showing the network tab of browser developer tool

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;
		}
	}
}




Picture showing the network traffic in the browser with multiple calls are bundled into a single call

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




Picture showing the minified css files

Click to Enlarge




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

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250