Do you think IIT Guwahati certified course can help you in your career?
Introduction
ASP.NET MVC has new techniques called Bundling and Minification. These techniques help us to reduce the Overall Load time of the Website. Meaning the static file transfer speeds between server and client is increased. When working in ASP.NET Webforms, A Master page is used to apply designs to all the pages along with a Script and CSS reference. There are many Script files such as a date picker, Image Popup, a javascript webcam request, and many more. Similarly, we need to use CSS file references for these different script files. The loading time will become exceptionally long by adding these many references on a single page. When our browser tries to access a website, it sends an HTTP request to the server to get a single CSS file for the date picker in return. After that, it will send a request to fetch CSS for the Image popup, the leading site's CSS, and lastly, a request for the webcam. The server had to send four requests to render the CSS, and then the same process will be carried out for the script, too, causing an additional four requests totaling eight requests for just one browser. Hence, Bundling and Minification techniques are used.
Bundling
ASP.NET's Bundling is a new feature that makes combining or bundling multiple files into a single file extremely easy. By creating CSS, JavaScript, and other bundles, Fewer files are created, and hence fewer HTTP requests will be made, thus improving first-page load performance.
Source:tutlane.com
This is a visual representation of requests in a client-server architecture. Here, four separate requests are being sent, which increases the main page's load time.
Source:tutlane.com
This is a visual representation of how a single request is required with the help of Bundling. With Bundling, the page load time is significantly reduced.
Bundle Types
There are two types of Bundles available in ASP.Net:
Script Bundle: It is responsible for JavaScript minification of single or multiple script files.
Style Bundle: It is responsible for CSS minification of single or multiple style sheets.
Script Bundle
A Script Bundle allows us to combine multiple JavaScript files into a single bundle, making us return a single HTTP request in ASP.NET MVC.
After creating a new MVC project, head over to the App_Start folder.
The App_Start folder contains the BundleConfig.cs file. This file contains the default bundles and looks like this.
using System.Web;
using System.Web.Optimization;
namespace Bundle
{
public class BundleConfig
{
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"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
}
This is the default bundle code snippet.
Creating a Script Bundle
To make things simple, let us overwrite the BundleConfig.cs to create our very own bundle.
using System.Web;
using System.Web.Optimization;
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/bs-jq-bundle").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-3.4.1.js",
"~/Scripts/jquery-3.4.1.slim.min.js"));
//the following creates bundles in debug mode;
//BundleTable.EnableOptimizations = true;
}
}
With this, we have created our very own bundle by creating an instance of the ScriptBundle class and specifying a virtual path and bundle name in the constructor. The ~/bundles/ is a virtual path, and bs-jq-bundle is the bundle's name. Then, we appended three js files, bootstrap.js, jquery-3.3.1.js, and jquery-3.4.1.slim.min.js, in the bundle. The bundles.Add() method is required to add new bundles into the BundleCollection. Now, to include the bs-jq-bundle bundle on the webpage, we need to use Scripts.Render() method in the layout view, as shown below.
Now, after running the application, we try going into the sources section inside the developer options. We can see under the pages section that the bundles folder is visible.
Hence, we have successfully created a bundle of three script files.
Style Bundle
A Style Bundle allows us to combine multiple CSS files into a single file, making us return a single HTTP request in ASP.NET MVC. Similar to Script Bundle, a Style Bundle can be created inside the BundleConfig.cs file located inside the App_Start folder.
Creating a Style Bundle
Here is another simple code snippet for a Style Bundle.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css",
"~/Content/bootstrap.min.css"
));
BundleTable.EnableOptimizations = true;
}
}
With this snippet, we have created our style bundle by creating an instance of the StyleBundle class and specifying the virtual path and the bundle's name in the constructor. Here the ~/bundles/ is a virtual path, and CSS is the bundle's name. Then, we added three .css files, bootstrap.css,bootstrap.min.css and site.css, in this bundle. The bundles.Add() method is required to add new bundles into the BundleCollection.
Again,like we did for Script Bundle ,the Styles.Render() method is used in the layout view, as shown below.
As we run our application, we can again find our new CSS bundle in the developer options.
Minification
ASP.NET's Minification feature is used to remove unnecessary whitespace, comments, and line breaks from the Script and CSS files to reduce the size and decrease the loading time of the main page. To understand the minification process consider the following code. Before Minification:
AddingAlt = function (imageID, context) {
//This is a comment
//
// Some Content
//This portion will be deleted
var Element = $(imageID, context);
Element.attr('alt', Element.attr('id').replace(/ID/, ''));
}
After Minification:
AddingAlt = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }
As we can see, with the help of Minification, the line of code was reduced exponentially. The comments and whitespaces were removed, but the long variable names were also shortened.
Original (Variable name before Minification)
Renamed (Variable name after Minification)
imageID
n
context
t
Element
i
Impact of Bundling and Minification
Now that we have a good idea of how Bundling and Minification work, a table shows precisely how these techniques help reduce the load times.
Using Bundling and Minification
Without using Bundling and Minification
Change
File Requests
9
34
256%
KB Sent
3.26
11.92
266%
KB Received
388.51
530
36%
Load Time
510 MS
780 MS
53%
It is evident with the help of the table that Bundling and Minification save over 50% of the page load time delay.
Frequently Asked Questions
1. What is a Bundle in MVC?
Bundling is a new feature that makes combining or bundling multiple files into a single file extremely easy. By creating CSS, JavaScript, and other bundles, Fewer files are created, and hence fewer HTTP requests will be made, thus improving first-page load performance.
2. What is a Script Bundle?
A Script Bundle allows us to combine multiple JavaScript files into a single bundle, making us return a single HTTP request in ASP.NET MVC.
3. What is a Style Bundle?
A Style Bundle allows us to combine multiple CSS files into a single file, making us return a single HTTP request in ASP.NET MVC.
4. Where is the BundleConfig file located?
The BundleConfig.cs is a file containing the MVC application's default bundles. The App_Start folder contains the BundleConfig.cs file in the project directory.
5. What is Minification?
ASP.NET's Minification feature is used to remove unnecessary whitespace, comments, and line breaks from the Script and CSS files to reduce the size and decrease the loading time of the main page.
Key Takeaways
In this article, we learned about ASP.NET Bundling Script and Styling techniques and how they make reducing the number of requests in a client-server relationship much more effortless. We also got to know about Minification with a practical example. However, this isn't enough, as there is always much more to explore and learn about this vast field of Web Development.
252+ registered 
