Bundling and Minification in ASP.NET 4.5

Optimizing application performance  is a key element for business. There are several ways by which we can optimize the applications performance. It can be done either by server side code optimization, caching or some client side optimization. In this post I am going to discuss about one handy and smart way to optimize web applications performance using Bundling and Minification  features which is introduced with ASP.NET 4.5 Developer Preview. ASP.NET 4.5 Developer Preview introduced bundling, which combines multiple JavaScript files for faster loading with less number of requests for download and minification, which reduces the size of JavaScript and CSS files by removing unneeded characters .  Combination of these bundling and minification helps web pages to load very faster. Let’s have a looks how it works.

The below images shows the typical web application structure of  that contains CSS and Javascript files along with other asp.net elements.

image

Scripts folder contains all the JavaScript files where as Styles contains all the CSS file. CSS  and JS files takes milliseconds of time  to load into the browser though it’s really matter how much time it’s takes to load the CSS and JS files.

This is how you refer the JavaScript and CSS in applications markup.

image

Run your application and  inspect the loaded Css and JavaScript files using IE Developer toolbar . You can see all the mentioned css and JavaScript in the html markup  loaded individually.

image

To take a more granular look on the loading perspective, you can use the IE Developer toolbar. You will find there are individual request to download the css and javascript files and each of them taken individual time.

image

You can take a quick look using YSlow statistics viewer for total number of request for javascript and css files.

image

ASP.NET 4.5 Introduced Bundling and Minifying the files which reduce the number of requests by merging the files into a single one. Bundling combines multiple JavaScript files for faster loading and reduced the number of request to download the files and minification reduces the size of JavaScript and CSS files by removing unneeded characters.

To apply the binding and  Minifying first of all you need to refer the folder for css and javascript instead of individual files. Along with the folder name you have the append css for CSS folder and js for JavaScript folder.

image

Once you are done with this changes, you have to enable the Bundling on Application_Start() event of global.asax.cs  file

image

That’s all. Run the application once again and inspect the save thing for CSS and JavaScript in IE Developer Toolbar. Interestingly you will find only one CSS File and one JavaScript has been loaded.

image

You can also use IE Developer toolbar to checkout the result. Yes, there is only two request, one for CSS and another for JavaScript. You can also find the significant amount of changes in file size and number of request for JS and CSS file also reduced.

image

image

Here is some inside view,

.NET 4.5 introduced a new class called BundleTable provides programmatic access to the collection of registered Bundle objects in an ASP.NET application. Bundle object  contains the  list of JavaScript or CSS files . ASP.NET runtime dynamically combines into a single virtual file that a browser can retrieve by using a single request.

image

Every elements of Bundle object is a key value pair . Key is a string that define either “JS” or “Css” and Values contains the the type of  System.Web.Optimization.DynamicFolderBundle.

image

You can create your custom bundles for JavaScript  as well as CSS.  Below code snippets shows the same.

  void Application_Start(object sender, EventArgs e)
        {
            BundleTable.Bundles.EnableDefaultBundles();

            var jSBundle = new Bundle("~/JsMinify", typeof(JsMinify));

            jSBundle.AddFile("~/Scripts/CustomFunction.js");
            jSBundle.AddFile("~/Scripts/jquery-1.4.1-vsdoc.js");
            jSBundle.AddFile("~/Scripts/jquery-1.4.1.js");
            jSBundle.AddFile("~/Scripts/JSONCreate.js");

            BundleTable.Bundles.Add(jSBundle);

            var cssBundle = new Bundle("~/CSSMinify", typeof(CssMinify));

            cssBundle.AddFile("~/Styles/Collection.css");
            cssBundle.AddFile("~/Styles/GlobalSupport.css");
            cssBundle.AddFile("~/Styles/MasterStyle.css");
            cssBundle.AddFile("~/Styles/MenuStyle.css");
            cssBundle.AddFile("~/Styles/Minimum.css");
            cssBundle.AddFile("~/Styles/Ribbon.css");
            cssBundle.AddFile("~/Styles/Site.css");

            BundleTable.Bundles.Add(cssBundle);

        }

Once you have your own bundle object, you can specify the same in your html markup as shown in below

Now, run the application and inspect your own created bundle in IE Developer toolbar.

image

One of the biggest advantages of this custom bundle objects is, you can refer multiple directories as shown in below code snippet.image

As shown in above code snippet, we are adding one directory for bundling with filtering criteria  of  ".JS" file. Boolean values indicate while adding the directory, it will ignore the sub directories.

You can find some more information over here ASP.NET 4.5 New Features also a Quick hit video ASP.NET Bundling and Minification

Hope this helps !
Cheers !
Aj

22 thoughts on “Bundling and Minification in ASP.NET 4.5

  1. “with ASP.NET 4.5 Developer Preview.” …why is the Preview link pointing to apple.com website? 1st paragraph, third line.

  2. Good article but there is theme & skin or it has been removed because i do not see theme folder in your image of solution exporer

  3. This looks great. I’ve been running a manual process using YUI Compressor for a while now.

    Just to confirm, you say that the bundling occurs dynamically at runtime. Does this mean we can edit our js/css files when debugging without having to recompile? My current workaround requires a conditional statement in my layout pages to determine which files to load (bundled vs non bundled) depending on whether or not I’m in debug mode.

    • Hi,
      I talked about ASP.NET Runtime bind all the files together into a single file.
      If you liked to configure based on debug and release mode, you can put a #DEBUG directives in Application_Start() it will check your debug and release mode and you can create your Bundles objects based on mode. But, you have to define the bundled name in your markup html to get them loaded.
      So, need to check if there is any workaround for it.

  4. My issue with this, is the browser is capable of simultaneous downloads. And combined with the use of a CDN, having 4-6 merge+minified JS files will load faster, than a single monolithic download. I’ve been using the Chirpy plugin for VS for this about a year and a half now, previously separate scripted min+merge as build tasks.

    Don’t get me wrong, for small/medium sites, this is very cool… I just don’t know that it is *the* solution for a lot of issues. A welcome addition just the same.

    (BTW, email/name/site boxes below are behaving strangely in chrome dev)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s