Articles → ASP .NET MVC → Bundling And Minification In Asp.Net Mvc

Bundling And Minification In Asp.Net Mvc

In this article, we will talk about bundling and minification in asp.net MVC

Bundling

In asp.net MVC, a bundling means combining multiple script and style files into one file. The main benefit is – it reduces the number of calls among client and server so the performance will be increased. Let’s see the how bundling reduces the traffic.

First of all create an asp.net MVC 4 web application. Once you create an MVC application you see the following code in BundleConfig.cs in App_Start folder.

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

		}
	}
}

Now comment this last line of the preceding code and add following line of code in _Layout.cshtml

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

Now run the application. Once the application is run

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

See the following screen shot

Picture showing the network tab of browser developer tool

Click to Enlarge

In the preceding screen shot, you can see multiple script files downloaded when a request is made to the server.

Now undo the changes what we have done earlier i.e. comment in the code in _layout.cshtml file and uncomment the code in BundleConfig.cs. Finally add following code in BundleConfig.cs

BundleTable.EnableOptimizations = true;

So the code in BundleConfig.cs will be

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

Now run the application and see the number of calls in developer tool.

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

Click to Enlarge

As you can see in the preceding screen shot there is a single file downloaded. So Bundling improves performance.

How To Add Style And Script Bundling In _Layout.Cshtml

Bundled styles can be called using Styles.Render in _layout.cshtml page.

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

In the similar way we can include script bundling

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

Minification

Minification means reducing the size of the file by removing unnecessary comments and whitespaces from the file. You can use multiple tools for minification, but easiest things you can do is publishing the code using visual studio. When you publish the code you can see the minified version of files.

Click to Enlarge

In the preceding figure, you can see that ‘min’ is added in file name and size is reduced as well.

Posted By -	Karan Gupta

Posted On -	Thursday, June 11, 2015

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**