Minifying Your JS and CSS with Cassette

I’ve recently investigated Minifying CSS and JavaScript for a client. Minifying compiles your CSS and JavaScript to a smaller optimised version; increasing a sites performance for its users. Ideally we wanted to place all JavaScript into a single file, a single request to the server.

We needed to find a solution that would be easy to use so developers at the client’s remote site would know how to use the solution once code was handed over.

At TrueClarity we use .NET for our solutions therefore we wanted a tool that would fit directly into the .NET framework neatly and intuitively. So after investigating various Minifying tools I decided to give Cassette a try an Asset bundling solution that neatly plugs into your projects in Visual Studio. Cassette comes with various functions one of them being Minification.

Cassette requires NuGet to be installed so the Cassette.Aspnet package can be downloaded and installed into your project. Once installed you will notice a new “.cs” file in your solution, this is where you add your configurations for Cassette. The installation will make alterations to your projects Web.Config to add the Cassette namespace to your project and http handlers.

Cassette uses ‘Bundles’ each bundle will resolve as a single file, html, css or js. This is where new bundles are added & removed.

bundles.Add<StylesheetBundle>("/Styles");

bundles.Add<ScriptBundle>("/Scripts");

Cassette will locate all of the Styles and Scripts within the given directories recursively and generate a single file.

Ordering is important
To ensure the generated CSS and JavaScript files work correctly I needed to inform Cassette of the ordering for the generated files. This can be accomplished through a bundle.txt located within the given directory in the Configuration file. Within the bundle.txt you will need to write the filenames for the required JS/CSS in the order required.

For instance your bundle.txt files will need to be located in:

~/Styles/bundle.txt
~/Scripts/bundle.txt

Referencing the generated files in Markup
To then inject the Javascript/CSS into your documents <head> or before </body> you will need to replace the current static reference in your mark-up with C# code which injects your new JavaScript/CSS.

JavaScript

<%Bundles.Reference("/Mobile/Scripts"); %> 
<%: Bundles.RenderScripts() %>

CSS

<% Bundles.Reference("/Mobile/Styles/stylesheets"); %>
<%: Bundles.RenderStylesheets() %>

The reference needs to be the same string specified in CassetteConfiguration.cs.

Build
When the project is built the JS/CSS is generated and accessible through the cassette http handler. For each build/change to CSS/JS cassette generates a random string for CSS and JS references. So this ensures all users are given the new changes without their cache being cleared locally. A cool feature!

Viewing Source
When you view source on your site you will now notice CSS in the head being referenced like so:

<link href="/cassette.axd/stylesheet/kKTh3QhojEGH-OUCjweN5PBrzOw=/Mobile/Styles/stylesheets" rel="stylesheet" type="text/css" />

You will also notice the new JS reference at the bottom of the page as a single reference which contains a concatenation of all the previous JavaScript files:

<link href="/cassette.axd/stylesheet/kKTh3QhojEGH-OUCjweN5PBrzOw=/Mobile/Styles/stylesheets" rel="stylesheet" type="text/css" />

When the web.config debug=”false” the output of cassette will be as above, but when its set to “true” cassette will output each js/css file independently without being minified so that you can debug through your code!

The Result
The following table shows the before and after comparison of the projects CSS and JavaScript.

The compiling was able to reduce the file size from 74KB to 14KB!

Cassette uses Microsoft’s Ajaxmin.dll a compiler for .NET. Cassette is an intuitive way of getting your project to consolidate your assets into single files; Potentially Cassette can support other compilers such as Yahoo’s YUICompressor or Google’s Closure compiler. Both are jar files so would need some tinkering through .bat files to perfect the automation.

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