Bundling and Minification Features of ASP.NET 4.5

What end user expect from a web application, a beautiful web interface and of course  better performance. If an application have a good user interface and it is not optimized in term of performance(running slow) then obviously users are going to be turned away from using it.There are several factors that causes slowness of an web application.One of the major factor is user's request to application and response from application.If an application have several resources like images,css,java scripts files then in each and every request made to application , there will be separate request to each request that will slow down the performance.

ASP.NET 4.5 has  introduced a new features for improving the performance of web applications.This newly added optimization features of ASP.NET 4.5 provide a neat and clean way to bundle and minify JavaScript and CSS files that will take care of the issues mentioned earlier.

Before moving further first we will learn what bundling exactly is?

What is bundling and minification?

In simple word bundling is a process for wrapping all together.If you see the request made to application you will find there is separate request for each resource.

So bundling is the process to combine all this resources into a single unit same like a bundle that includes various stuffs  that are packed all together.That means if we request for this bundle we will get all resources packed under that bundle.In this way there will be a one single request for a single bundle.

Minification is the process for minified(compress) that resource so that response size get reduced.

To start with bundling and minification in ASP.NET 4.5 what you need is to install System.Web.Optimization.dll  library.

Open NuGet and search for Microsoft.AspNet.Web.Optimization package

Once you complete with installation will will get new references system.web.optimization,webgrease,system.web.infrastructure etc.

Register bundle

To register bundle you need to add below line in global.ascx file.you need to create separate bundle for script files and CSS files.(Can register multiple bundle  for scripts and css)

Make sure that you have added reference of all dlls in application.

By doing your bundles for scripts and css are ready to use  in web pages.

Above image will show how to add bundle to you web pages.

Now run you application and check the request in browser console--> network you will find there is only one request for each script and css bundle.

Here is the example that compares the requests before and after bundling.

Conclusion

So this  newly added bundling and minification features of ASP.NET 4.5 make it easy to bundle your JavaScript and CSS files and it will  boost the overall performance of your web applications. In order to avail the bundling and minification features you need to specify URLs to script and CSS files in a certain way. 

Hope you like the tutorial.Please give your feedback.

Thanks.