How to use Bundling and Minification in ASP.NET MVC?

Hey guys, I have come back with another new blog in MVC i.e. How to use Bundling and Minification in ASP.Net MVC?In this blog, I will explain you about Bundling and Minification in-depth with practically in step by step way. I hope this blog will enhance the knowledge and skills for developing an application in a better way.

Most importantly, thanks to all of you for regularly following and reading my all the blogs. This blog is also very helpful for the beginners and for experienced software professionals as well. Now, let’s start with the Bundling.

What is Bundling?

Bundling is a kind of technique that was started and introduced in MVC 4 to improve request load time from the server. In simple words, Bundling means a bundle or combination of all the necessary files of JavaScript and CSS and other files into a single file. This will improve the server request-response time to load the page of an application.

  • A bundle cannot contain both CSS(Cascading Style Sheet) and JavaScript file.
  • A bundle is a logical group of physical files.
  • These files (CSS and JavaScript) loads in a single HTTP(Hyper Text Transfer Protocol) request.
  • We create a Separate bundle for CSS and JavaScript file.
  • Browser limits the number of simultaneous connection to get an asset(CSS, JS, and Images).

How to use Bundling in ASP.Net MVC?

Now, I am going to explain a practical demo of how to use bundling in our ASP.Net application.

Step 1: Open Visual Studio and click -> File -> New -> Project and name it BundleMVCDemo and Click on OK.

Step 2: The above screenshot looks after creating the Project and for this, we click on MVC and Click on OK. It takes to load all the files.

Step 3: Now, we write the code of how bundling works in our application in BundleConfig.cs under App_Start folder. The code looks like:

using System.Web;
using System.Web.Optimization;

namespace BundleMVCDemo
{
 public class BundleConfig
 {
 public static void RegisterBundles(BundleCollection bundles)
 {
 // This is the auto-generated file and Code under App_Start folder for bundle the CSS and JavaScripts file.
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery.validate*"));

// JS Bundle
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
 "~/Scripts/bootstrap.js",
 "~/Scripts/respond.js"));
// CSS Bundle
bundles.Add(new StyleBundle("~/Content/css").Include(
 "~/Content/bootstrap.css",
 "~/Content/site.css"));
 }
 }
}

Step 4: After this, we need to call this BundleConfig.cs file using Global.asax.cs file in our application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace BundleMVCDemo
{
 public class MvcApplication : System.Web.HttpApplication
 {
 protected void Application_Start()
 {
 AreaRegistration.RegisterAllAreas();
 FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
 RouteConfig.RegisterRoutes(RouteTable.Routes);
 BundleConfig.RegisterBundles(BundleTable.Bundles); // first call RegisterBundles method of BundleConfig Class for Bundling.
 }
 }
}

Step 5: In the last step, we call these bundles on the View because MVC only returns View, and all these Bundlings render to the UI as per the code above. This will improve the request load time from the server.

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryval")
 @Scripts.Render("~/bundles/bootstrap")
}

At the time of calling the bundles on the View, we put @Styles for rendering the CSS files and @Scripts for rendering the JavaScript(Js) files.

Bundle Types

There are several bundle classes introduced in MVC 5 and contained in the following namespace.

System.web.Optimization

  1. Scripts: It represents a type that allows rendering script elements.
  2. Styles: It represents a type that allows rendering style elements.
  3. ScriptBundle: It contains only JavaScript minification files
  4. StyleBundle: It contains only CSS minification files.
  5. DynamicFolderBundle: It represents a bundle that ASP.Net creates from a folder.

What is minification?

Minification means minified the bigger thing into a smaller one. It is a technique for removing unnecessary or unwanted characters like whitespaces, newline, tabs, comments, and shortening variable names to one character etc in the CSS and JS files.

Without minified, the load time of a page in our application is improved. With the help of minification, we can reduce the size of JavaScript and CSS file. For this, minification is used.

Both Bundling and minification in MVC loads page faster by minimizing the size of the file (CSS and JavaScript) and the number of requests for loading the page.

What are the Advantages of Minification?

  1. CSS and JS minification files are very small.
  2. The minification files download in a much faster way and consume less bandwidth.
  3. After minified the files, the functionality will be same as before.

How to use Minification in ASP.Net MVC?

Now I am going to show a small example of how to use minification in our application.

$(function(){
$("#btn").click(function(){
    //this is comment
    var num = $("#txtnum").val();
    var result=num%2;
     if(result==0){
      alert("Number is Even");
}else{
      alert("Number is Odd");
}
});
});

The above code will minimize into following script of code.

$(function(){$("#btn").click(function(){ var n = $("#txtnum").val(); var t = n % 2; if( t == 0) alert("Number is Even"); }else{ alert("Number is Odd");} }); });

So, the difference in both the code looks very different as:

  • In the minified file, the comment code will remove automatically.
  • All code merged into a single line.
  • In the function name, all the variables, parameters renamed to a single character.
Original Variable,parameter Renamed
num n
result t

Impact of Bundling and minification

In this, I will show you the impact of using Bundling(B) and Minification(M) and without using B/M.

 Options Using B/M Without B/M Change
File Requests(CSS/JS) 9 34 256%
KB Sent to the Server 3.26 11.92 266%
KB Received from the Server 387.51 530 36%
Page Load Time during Execution 512 MS 780 MS 52%

This is how minification works.

Bundling and Minification Performance

Here, I am going to show the performance of both bundling and minification in the browser and also show the time of difference when the page loads in the browser.

If we look at the performance, we need to set debug mode false because bundle doesn’t work on the debug mode.

<system.web>
 <authentication mode="None"/>
 <compilation debug="false" targetFramework="4.5"/>
 <httpRuntime targetFramework="4.5"/>
 </system.web>

After this, we run the application and check the performance of these files.

Load time for bundle

The load time of files with bundling is 141 ms while the load time without bundling is 281 ms.

Here in this blog, I have tried to explain in depth of each and every concept of Bundling and Minification and How to use them in Visual Studio. It is easier, unique and most important concept in Dot Net. Nowadays, it is a smart concept to minified the files.

Moreover, I have defined all about how to show the performance of bundling and minification. So, learn this technique of Bundling and Minification and go ahead. I have elaborated this blog to deliver easy, simple and valuable content regarding this newly innovated technology to learn step by step. I hope this piece of information will be more valuable and important for a new learner.

Leave a Comment