MVC 4 New Feature - Bundling and Minification

“Bundling and Minification” is a new feature introduced in ASP.NET MVC 4. Bundling reduces the number of HTTP requests to the web server by combining group of JS or CSS files into one file. Most of current browsers only allow about 6-8 concurrent connections to the host web browser. That’s means if you have more than 8 JS or CSS files, the browser only loads them when the first concurrent connection(s) is closed. Bundling will improve the performance by combining multiple files into one and thereby improve the overall performance of the website. Minification improves the load time of a JS or CSS file by removing unnecessary whitespace, comments and characters.

The both Bundling and Minification provide in MVC 4 through Microsoft.Web.Optimization namespace.

In order to enable Minification and Bundling in your ASP.NET MVC 4.0 application, you can follow the steps below.

1. Open BundleConfig.cs file under App_Start folder. Enable Bundling and Minification by adding the following line into RegisterBundles method of BundleConfig.cs.

public static void RegisterBundles(BundleCollection bundles)
{
BundleTable.EnableOptimizations = true;
}

2. Add group of JS or CSS files into global BundleTable object. After specifying a virtual path for the bundle, include files you need in the bundle. The following code demonstrates how to bundle JS and CSS files. You can use ScriptBundle for bundling JS files and StyleBundle for bundling CSS files.

public static void RegisterBundles(BundleCollection bundles)
{
// Bundling different versions of JS files using wildcards
bundles.Add(new ScriptBundle("~/bundles/js")
.Include("~/Scripts/jquery-{version}.js")
.Include("~/Scripts/jquery-ui-1.*"));

// Bundling JS files regardless of version
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

// Bundling multiple JS files.
bundles.Add(new ScriptBundle("~/bundles/AppJS").Include(
"~/Scripts/JS-File1.js",
“~/Scripts/JS-File2.js”,
“~/Scripts/JS-File3.js”));

// Bundling CSS files
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site1.css",
"~/Content/site2.css"));
}

3. Add references to these bundles in the _Layout.cshtml page.

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("js")
@Scripts.Render("AppJS")

4. Set debug attribute of compilation property in the web.config to false. If this value is true, Bundling and Minification is disabled and ASP.NET MVC 4 runtime refers to individual CSS and JS files instead. So, if you are in development and you would like to debug, you can set debug to true and when you are ready to deploy, you can change this value to false.

<system.web>
<compilation debug="false"/>
</system.web>

ASP.NET MVC 4 Developer Preview for Visual Studio 2010

Microsoft has released MVC 4 Developer Preview for Visual Studio 2010 and available to download from ASP.NET MVC 4 Developer Preview. ASP.NET MVC 4 can be installed and run with ASP.NET MVC 3 side-by-side.

Software Requirements:
1. .NET 4.o
2. Visual Studio 2010 SP1 or Visual Web Developer Express 2010

New features:
1. Enhanced ASP.NET MVC 4 project template allows you to create more modernized websites. The size of website is adjusted according to screen resolution.
2. Mobile project template - Develop web applications that can run on any phone. The MVC4 mobile template is based on JQuery Mobile framework.
3. Enhanced support for asynchronous methods.