Introduction

Bundling and minification both are popular techniques to enhance the performance of the modern day web applications.Bundling reduces the number of requests to server and minification reduces the size of requested assets. Modern Application are more responsive and attractive because of two great components JavaScript and CSS. These 2 components have unleashed the power of the web platform.

The ASP.NET MVC offers both the technique and exposes System.Web.Optimization class, which exists in the System.Web.Optimization dll to implement these.

The core philosophy of MVC is Conventions and Configuration, following this philosophy Microsoft allows the developers to configure the components to take part in this technique and enhance the performance of the application.

Bundling

The bundle is a logical group of physical files, which loads in a single HTTP request bundle can’t contain both JavaScript and CSS files. Bundling is created separately for JavaScript and CSS files.

Bundle Types

Script Bundle (JavaScripts)

Script Bundle is responsible for JavaScript bundling of single or multiple script files

Style Bundle (CSS)

Style Bundle is responsible for CSS bundling of single or multiple style sheet files.

Let’s say we have a MVC application that includes Kendo related JavaScript and CSS files. Kendo a Telerik component comes with lot of rich controls that enhance the look and feel of modern web and mobile applications, is packaged as a bundle of DLL, CSS and JS files.

To optimize the performance of the application we need to create separate bundles for CSS and JavaScript files that we plan to use.

Module Configuration

Add Style and Script bundles in bundle module. Bundle name is a virtual path of files.

Given below example contains bundles of style and script and “~/Content/css”, “~/Content/kendo/css”, “~/bundles/kendoScript/kendoScript” are the bundles name.

using System.Web.Optimization;
bundles.Add(newStyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
 bundles.Add(newStyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.common-material.min.css",
"~/Content/kendo/kendo.default.min.css"  ));
 bundles.Add(newScriptBundle("~/bundles/kendoScript/kendoScript").Include(
"~/Scripts/kendoScript/jquery.min.js",
"~/Scripts/kendoScript/kendo.all.min.js",
"~/Scripts/kendoScript/kendo.aspnetmvc.min.js"));

Versioning

As we are in a fast-moving development era, the third-party component or even our project/product might b release in version over shorter time period, to deal with this MVC allows us to define the versioning of a bundle.

The code given below, shows that it always loads the latest version of the jQuery file.

bundles.Add(newScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

Wild Card Character Support

Bundling allows combine the files that are in the same folder and have the same prefix or suffix, a type of grouping JS Feature or Modules.

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

Register Bundles

Next step is to register bundle in the application by implementation within Application_Start method in global.asax.cs file and register this bundle module to bundle config file.

It is not needed to register individual bundles in the Application, just register the bundle module in the Application for all style and script bundles.

Protected void Application_Start() {

BundleConfig.RegisterBundles(BundleTable.Bundles); 

}

We can use this bundle by adding Styles.Render() and Script.Render() in specific page.

We are using in layout page that can be called all over the application and call all the CSS and JavaScript files in single HTTP request

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/kendo/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/kendoScript/kendoScript")

@Scripts.Render("~/bundles/bootstrap")

Application Configuration

Bundle by default doesn’t work in the debug mode. Thus, we can set the debug value true/false in web.config file as per our requirement.

<system.web>

<compilation debug="false" targetFramework="4.7.1"/>

<httpRuntime targetFramework="4.7.1"/>

</system.web>

Then check in to the browser window you can see the bundle can create single HTTP request to the server.

For example, check below images that show that without using bundling each request is goes separately to the server and using bundling they sent a single request to the server by combining all the included bundle files.

Without the use of bundling

With the use of bundling

Minification

Minification is a technique removing unnecessary characters, comments and extra space from the CSS/JavaScript files, which improved the load time of web pages. Reduce the size of files.

For Example:

Regular Java Script

simpleHello = function(namecustomer){//this is commentvar message = "Hello" + namecustomer;    alert(message);}

Minified JavaScript:

simpleHello=function(n){var t="Hello"+n;alert(t)}

For applying bundling and minification we need to set EnableOptimizations equal to true.

// Enabling Bundling and Minification

BundleTable.EnableOptimizations = true;

Below two images show that applying minification is to reduce the file size and reduce the page load time.

Without the use of bundling and minification

With the use of bundling and minification

Author: Kruti Talati