Script Management in MVC 4 with Bundling

In a robust Web application, there is a requirement to download numerous files to support JavaScript code files and CSS styles that reside on the Web server.

These downloads can become a performance hit that can affect the User Experience due to the increasing size and numbers of files as a Web application is developed.

The overhead for the HTTP calls comes into play when each script is downloaded as a unique HTTP call.

Bundling & Minification

Bundling and minification are two techniques available to improve request load time.

Bundling improves load time by lowering the number of requests to the Web server
Minification reduces the size of requested Browser assets such as CSS and JavaScript.

Most modern browsers limit the number of connections that the Browser can submit at one time to six per Hostname.

While the current six requests are being processed, additional requests for CSS and JavaScript files will be queued by the Browser.

Example from the Microsoft ASP.Net Web Site:

Bundling HTTP Bars

The gray bars show the time the request is queued by the browser waiting on the six connection limit.
The yellow bar is the request time to first byte, that is, the time taken to send the request and receive the first response from the server.
The blue bars show the time taken to receive the response data from the server.

As of ASP.NET 4.5 a new namespace is available: System.Web.Optimization.

Using the BundleCollection class to add files to the DynamicFolderBundle collection you can register your files inside a new class file: BundleConfig.

This class resides inside the new application folder in MVC4: App_Start. This is initialized inside the Global.asax.cs file during application start-up.

This process makes it easy to combine in a bundle multiple files into a single file.

You can add CSS, JavaScript and other files to the BundleCollection class’s DynamicFolderBundle and send to the Client in fewer HTTP calls.

Fewer Files Means Fewer HTTP Requests

… That Improves First Page Load Performance

Minification removes the formatting characters required to be human readable.

This reduces the file size as the Browser’s parsing engine ignores those characters anyway.

This is done as part of the bundling process when sent to the Browser.

The image below shows the same timing view as above but this time with bundling and minification enabled.

Improved Bundling Bars

Although this is an MVC4 example
the Class is available and usable
in ASP.NET applications as well

Implementation Examples of Bundling and Minification

+JavaScript & CSS Files in the TMD Portal MVC4 Application

The BundlingConfig class is created when the MVC4 application is selected as Web application type:

using System.Web.Optimization;

namespace TMD.Portal.App_Start
{
    public static class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Styles/flip.css",
                                                                 "~/Content/Styles/portalStyles.css"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*",
                                                                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/portal").Include("~/Scripts/Portal/portalTiles.js",
                                                                     "~/Scripts/Portal/objectPrototypes.js",
                                                                     "~/Scripts/Portal/startup.js",
                                                                     "~/Scripts/knockout-{version}.js"));
        }
    }
}

using System.Web.Optimization;

namespace TMD.Portal.App_Start

{

public static class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

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

"~/Content/Styles/portalStyles.css"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

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

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*",

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

bundles.Add(new ScriptBundle("~/bundles/portal").Include("~/Scripts/Portal/portalTiles.js",

"~/Scripts/Portal/objectPrototypes.js",

"~/Scripts/Portal/startup.js",

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

}

Files are added to a New ScriptBundle and given a path that is referenced in the _layout page in the MVC4 HTML5 “Master Page“:

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html><meta charset="utf-8" />@ViewBag.Title

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

            //Content Eluded

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/portal")
        @RenderSection("scripts", false)

DOCTYPE html><meta charset="utf-8" />@ViewBag.Title

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

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

//Content Eluded

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

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

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

@RenderSection("scripts", false)

The Global.ascx.cs start up file loads the objects into memory for delivery to the Browser as optimized payloads:

using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using TMD.Portal.App_Start;

namespace TMD.Portal
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

using TMD.Portal.App_Start;

namespace TMD.Portal

{

public class MvcApplication : System.Web.HttpApplication

{

protected void Application_Start()

{

AreaRegistration.RegisterAllAreas();

WebApiConfig.Register(GlobalConfiguration.Configuration);

FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

RouteConfig.RegisterRoutes(RouteTable.Routes);

BundleConfig.RegisterBundles(BundleTable.Bundles);

}

This feature in .Net 4.5 improves
**the User Experience by optimizing
the delivery of Browser files.**

This reduces the HTTP overhead
through fewer calls and smaller packages

Wisdom Pearl # 123 – Organize Your Creations

A Place for Everything … And Everything in its Place

… Organize Your Creations By Their Behaviors and Responsibilities

Bio
Latest Posts

Brad Huett

I am a Principal Architect at Liquid Hub in the Philadelphia area specializing in Agile Practices as a Certified Scrum Master (CSM). I use Test Driven Development (TDD) and Acceptance Test Driven Development (ATDD) with Behavior Driven Development (BDD) as my bridge to Agile User Stories Acceptance Criteria in a Domain Driven Design (DDD) implementing true RESTful services

Latest posts by Brad Huett (see all)

DevOps: A Bridge to Your DevOps Culture - March 25, 2016
Embracing Test Driven Development (TDD) - March 25, 2016
DevOps: Delivering Agile Projects - March 25, 2016

February 2019
M	T	W	T	F	S	S
« Mar
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28

Script Management in MVC 4 with Bundling

In a robust Web application, there is a requirement to download numerous files to support JavaScript code files and CSS styles that reside on the Web server.

These downloads can become a performance hit that can affect the User Experience due to the increasing size and numbers of files as a Web application is developed.

The overhead for the HTTP calls comes into play when each script is downloaded as a unique HTTP call.

Bundling & Minification

Bundling and minification are two techniques available to improve request load time.

Bundling improves load time by lowering the number of requests to the Web server

Minification reduces the size of requested Browser assets such as CSS and JavaScript.

Most modern browsers limit the number of connections that the Browser can submit at one time to six per Hostname.

While the current six requests are being processed, additional requests for CSS and JavaScript files will be queued by the Browser.

Example from the Microsoft ASP.Net Web Site:

The gray bars show the time the request is queued by the browser waiting on the six connection limit.

The yellow bar is the request time to first byte, that is, the time taken to send the request and receive the first response from the server.

The blue bars show the time taken to receive the response data from the server.

As of ASP.NET 4.5 a new namespace is available: System.Web.Optimization.

Using the BundleCollection class to add files to the DynamicFolderBundle collection you can register your files inside a new class file: BundleConfig.

This class resides inside the new application folder in MVC4: App_Start. This is initialized inside the Global.asax.cs file during application start-up.

This process makes it easy to combine in a bundle multiple files into a single file.

You can add CSS, JavaScript and other files to the BundleCollection class’s DynamicFolderBundle and send to the Client in fewer HTTP calls.

Fewer Files Means Fewer HTTP Requests

… That Improves First Page Load Performance

Minification removes the formatting characters required to be human readable.

This reduces the file size as the Browser’s parsing engine ignores those characters anyway.

This is done as part of the bundling process when sent to the Browser.

The image below shows the same timing view as above but this time with bundling and minification enabled.

Although this is an MVC4 example the Class is available and usable in ASP.NET applications as well

Implementation Examples of Bundling and Minification

This feature in .Net 4.5 improves the User Experience by optimizing the delivery of Browser files.

This reduces the HTTP overhead through fewer calls and smaller packages

Wisdom Pearl # 123 – Organize Your Creations

A Place for Everything … And Everything in its Place

… Organize Your Creations By Their Behaviors and Responsibilities

Brad Huett

Latest posts by Brad Huett (see all)

Share this:

Like this:

If you think this post was worth your time: Like It Please

Although this is an MVC4 example
the Class is available and usable
in ASP.NET applications as well

This feature in .Net 4.5 improves
**the User Experience by optimizing
the delivery of Browser files.**

This reduces the HTTP overhead
through fewer calls and smaller packages