Bundling & Minification in Asp.net MVC

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. By using bundling you can combine multiple files into one file and by using minification you can optimize your CSS and javascript file to a greater extent. Using bundling and minification improves load time performance by reducing the number of requests to the server and reduced the file size of requested assets(i.e. Javascript and CSS files)

Sections:

• Overview
• Implementation of Bundling
• Implementation of Minification
• Benefits of using bundling and minification 

Overview :

Bundling and minification primarily improves the performance of page, So by using this all server side files are combined and minify into one so it reduces the number of requested to the server and provide better performance to your web application this process is done at the run time and it also maintains key which indicates the version of file. 

Implementation of Bundling :

As we discussed above by use of bundling we can bundle or combined all javascript and CSS file into a single file to achieve this there are 4 simple steps.

Step 1: Open your solution in visual studio and go to App_Start folder and select BundleConfig.cs (if this file is not present in the App_Start folder, So you should manually add this class and take a reference to System.Web.Optimization). Below is the screen shot for your reference.

Solution Explorer

Open this file and put this code inside you BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)

{

      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));

      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js",

                      "~/Scripts/respond.js"));

      bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/site.css"));

 }

you can put any number of CSS and javascript file in a single bundle and you also create bundles as per your requirement, Below are the screen shot of BundleConfig.cs file.

BundleConfig.cs

Your 1st step is complete and the longer one is finished.

Step 2 : After all this you need to register this BundleConfig.cs file in Global.asax file under Application_Start event like BundleConfig.RegisterBundles(BundleTable.Bundles);

protected void Application_Start()

{

       AreaRegistration.RegisterAllAreas();

       FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

       RouteConfig.RegisterRoutes(RouteTable.Routes);

       BundleConfig.RegisterBundles(BundleTable.Bundles);

 }

Step 3: Render this bundle into view by using a small code.

Render Javascript bundle in view you need to call like this @Scripts.Render("~/bundles/modernize")

Render CSS bundle in view you need to call like this @Styles.Render("~/Content/CSS")

The name which is present under Script.Render and Styles.Render is the same name which you have provided at the time of creating a bundle name in bundleconfig.cs

Step 4: To enable bundling you need to follow one more step under the web.config file you need to change compilation debug=" true" to false like this

compilation debug="false" targetFramework="4.5" 

by doing this your bundling will start and you can see this by running your project.  

Implementation of Minification: Minification is a technique where unwanted spaces and commented code have been removed due to this we can reduce the size of file content.

The process of minifying CSS and javascript is same as bundling only one keyword is required to process this. 

BundleTable.EnableOptimizations = true;

put this line in bundle config.cs, After that, your minification will work in run time and run the project in debug="false" then you can see the js and CSS files are bundled and minify also.

below I have attached the screen shot of bundleconfig.cs file.

BundleConfig.cs file after minification code.

Benefits of using bundling and minification: There are a lot of benefits of using bundling and minification it will take less time to get files from the server.

If we are not using bundling and minification technique so it will take a lot of time to get those file below image will show this.

Before bundling and minification, it will take lot of HTTP request

In the above image, we can see there are so many CSS and javascript file coming from the server and each file takes our time to render. So if we combine those CSS and javascript file and minify those file so it will take less and file size will also reduce, See below image for your reference.

After bundling and minification reduce server HTTP request

In the above image, we can see we can combine all CSS and javascript file into one so less HTTP request is there and it will take less time to render.

Hey, friends thanks for reading this article the motive of this article is how we can improve our website performance by using this technique definitely your website performance will increase and give better output.

This is only a one step to increase the performance of the website, In future, i will provide lot's of technique which will help you for increasing performance.

If you have any query or suggestion, So I'll be happy to help you.

KEEP CALM and READ ON!!!!.    

Ankur Omar