It’s easy to get started with too. No more complicated than referencing your css and javascript files directly.

No Excuses

I hadn’t implemented any minifying, combining, etc for my app Pik Pak. As I saw it (with my lean goggles on), it worked fine, it was good enough. I could benefit from it but really was the effort worth it. I’d bookmarked Cassette ages ago when it was Knapsack and made it a someday-maybe task. As I was giving Pik Pak a facelift, removing a garish design and replacing with the wonderful Twitter Bootstrap, it was time to bring it in.

My opinion has changed, it is worth it. It takes so little effort. I know in my next asp.net project it will go in at the beginning, it’s so easy to use there’s no excuse not too (Except perhaps 1, if you’re not using .NET 4.0). In dev I get the scripts unaltered, just like I’d inserted them manually and in prod they get minified, compressed and combined.

How it Works (Briefly)

I want to share with you a little bit about how it works, as it wasn’t clear to me at first. I originally mistook the Bundle.Reference() calls to be informing Cassette about the asset and saying it’s required on this page. There’s actually 3 parts to Cassette, in it’s simplest form (there’s tons more to it):

There are 3 parts to getting your scripts/css combined, minified etc

1. Tell Cassette about your css/js files

Cassette doesn’t automatically discover your files (assets), you need to tell it where they are and how they should be combined (bundles). A bundle is a number of files that will be combined into one minified/compressed file (in production) that is referenced by one script/stylesheet tag, thus causing a single download. The default CasseteConfiguration.css that get’s dropped in by nuget creates a bundle for every css or javascript file. Which is better than nothing. You’re getting minification, compression, caching, versioning but it’s still a download per file, there’s no combining. So you want to define bundles to minimise the number of downloads the browser has to make.

As well as defining what goes into a bundle you can also define the order within bundle and dependencies between bundles or files. Eg your script might depend on a framework like jQuery or Backbone.

Tips

So far, these are my thoughts on how to get the best out of Cassette with least effort.

Render scripts before closing body tags

Everyone knows you should render your scripts before the closing body tags, to prevent the page load being blocked. Have your main @Bundles.RenderScripts(); before the closing body tags and have a specific one @Bundles.RenderScripts("header") in the header for those scripts that need it (Modernizr).

jQuery CDN

If your using jquery, you should create a bundle just for itself. Create a folder (probably called jquery), add the jquery file and a bundle.txt file containing the following:

Then reference the bundle as normal @Bundles.Reference("scripts/jquery"); In dev you get your full jquery js file and in prod you get googles cdn jquery file (most likely already cached in the broswer) with a fallback to your minified/compressed one.

Convention

Use bundles.AddPerSubDirectory<ScriptBundle>("Scripts"); and arrange your scripts/css into folders for each bundle you want. That way you don’t have to go back and touch the CasetteConfiguration. You can leave it upto convention and fine tune with a bundle.txt file in the folders/bundles where needed.

It’d be great to hear how your using Cassette, in the comments and any tips that have helped.