Saturday, September 1, 2012

Asset Bundling For .NET Web Apps


Introduction

In this article we will see how to use the CASSETTE framework and its implementation in ASP.NET.

About CASSETTE

Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS, Sass and HTML templates.

Step 1

Download the CASSETTE files from the following (or we can use the NUGET command to add the files to our project):

http://getcassette.net/download

Step 2

Once downloaded and the files referenced, it looks as in the following files:

Assetbundling.NETwebapps.jpg



We mainly used the "cassette" dll in this demo project and others are add by NUGET.

Step 3

Our package will add a configuration file as mentioned below in AppCode.

ConfigurationNETWebApps.jpg


Step 4

Add the required configuration details in that file, to control our CSS and JavaScript files.

ConfigurationdetailNETWebApps.jpg

We are not using any CSS files in the Demo project and we configured our scripts as the main/root folder for JavaScript.

Step 5

Add the script reference to the ASP.NET page, as a Casssette format; see:

ScriptReferenceASPNET.jpg


Add the RenderScripts() method for JavaScript load and RenderStyleSheet() method for CSS files; see:

RenderScriptmethodNETWebApps.jpg

Step 6

Run the page and you will see the result as in the following. To analyze the result we will add a simple ASP.NET and refer to the JavaScript.

ResultNETWebApps.jpg

We are able to see the JavaScript files, size and loading time.

JavaScriptNETWebApps.jpg

The preceding image is fiddler image for the same page, we will notice that every page refreshes and loads the scripts every time as a fresh request with the full file size.

Now let's see our actual implementation page result; see:
CassetteDemoPageNET.jpg

We will see the jQuery and prettyphoto files are loaded from the cache and its compressed. Let's see the fiddler image.
FiddlerImageNETWebApps.jpg
After the first time the scripts are loaded, it will load from the cache for any next page refresh.

CacheNETWebApps.jpg
In the fiddler, we won't find the script load for the subsequent page refreshes, because it's loading from the cache.

Summary

With a single change to Web.config,debug="false", Cassette switches into high-performance mode.

The CASSETTE bundle is flexible, extensible and optimized for developer happiness.

No comments:

Post a Comment