ASP.NET MVC 4 Bundling and Minification - Performance Optimization

Bundling and minification of CSS and JavaScript is one of the most popluar and powerful feature of ASP.NET MVC. Bundling and minification reduces the number of HTTP Requests and payload size resulting in faster and better performing ASP.NET MVC Websites. There are a number of ways you can reduce and combine the size of CSS and JavaScript using the new feature, and in this ASP.NET MVC 4 Tutorial We will learn how you can create custom bundles where you specify the name and order of CSS and JavaScript Files. This method will work compatable with ASP.NET MVC 5 or lower version. While Bundling and minification of CSS and JavaScript in ASP.NET vNext can be achieved gruntjs. If you are looking for Bundling and minification of CSS and JavaScript in ASP.NET MVC 6, click here to read the article.

ASP.NET MVC 4 BundleTable and Bundles

Let try to understand by creating an empty ASP.NET MVC 4 Project, When you create a new empty MVC 4 project, you will notice a couple of changes in the _Layout.cshtml and Global.asax.cs files. The _Layout.cshtml file will include Razor Code referencing System.Web.Optimization and BundleTable.Bundles in the CSS and JavaScript References in the head of the file

These references are for ASP.NET MVC 4 and will be shortened in the production version of ASP.NET MVC 4 as a simple HTML Helper. If you look at the actual source code in the browser, you will see these get rendered as:

The CSS and JavaScript files in the empty ASP.NET MVC 4 project end up being minified and compressed. The result is less HTTP Requests in your ASP.NET MVC 4 web application and a reduction in the size of the CSS and JavaScript sent by the IIS Web Server. In Global.asax.cs you will notice a reference to the new BundleTable in Application Startup:

This is a method in System.Web.Optimization that registers two bundles that combine and minify the default CSS and JavaScript that comes with the "empty" ASP.NET MVC 4 Project.

ASP.NET MVC 4 Custom css and js Bundling & Minification

In BundleConfig.cs class file in your App_Start folder, you will find following code which will use to add our custom css & js file. Following are the sample code.

ASP.NET MVC 4 Bundling & Minification CDN & Debug Mode Support:

It is very hard to debug the minified js & css file, when debugging your ASP.NET MVC 4 Web Application you would rather the CSS and JavaScript not be bundled and minified for testing. If you want to debug your js file you can use following code, which allow us to enable or disable the features that whether we want to minify our js & css file. This feature is very useful for developers. You can also use CDN by using given code below.

As CDN is used in release version, to test application we need to set Debug="False” in our web.config check that in local machine.

Summary: The bundling and minification in ASP.NET MVC 4 will help increase the performance of your ASP.NET MVC 4 Websites by reducing the number and size of HTTP Requests to the server. This article shows how can we add our custom css & js file for bundling and minification in ASP.NET MVC 4. If you are looking for Bundling and minification of CSS and JavaScript in ASP.NET MVC 6, click here to read the article.