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:





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.




Step 4

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



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:




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



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.



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



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:

We will see the jQuery and prettyphoto files are loaded from the cache and its compressed. Let's see the fiddler image.

After the first time the scripts are loaded, it will load from the cache for any next page refresh.

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.