Documentation

Assets and Bundles

An asset is any source file used in the web browser. In Cassette this means JavaScript, stylesheets and HTML templates.

A bundle is a group of assets that make up a single logical resource. Cassette lets you keep each asset separate to make debugging easy. Then in production mode, Cassette will concatenate the files together and compress them.

Out of the box, Cassette runs in a very simple mode where each asset is treated separately. However, referencing many separate assets in production is bad for performance. So let's configure Cassette to combine assets into bundles.

Configuration

The Cassette.Aspnet nuget package adds a file to your project called CassetteConfiguration.cs. The class in that file is used to configure Cassette.

public class CassetteConfiguration : ICassetteConfiguration
{
    public void Configure(BundleCollection bundles, CassetteSettings settings)
    {
        // ... configure Cassette here ...
    }
}

Bundles are added to the BundleCollection using Add methods. These methods usually require a generic type parameter to specify the type of bundle being added.

Here's a sample configuration:

public class CassetteConfiguration : ICassetteConfiguration
{
    public void Configure(BundleCollection bundles, CassetteSettings settings)
    {
        // Add a stylesheet bundle containing all the CSS files in ~/Content
        bundles.Add<StylesheetBundle>("Content");
        // Add a script bundle for each sub-directory of ~/Scripts
        bundles.AddPerSubDirectory<ScriptBundle>("Scripts");
    }
}

Keep in mind that a bundle is a unit of deployment. If any asset in a bundle changes, then the entire bundle has to be downloaded again by web browsers. So perhaps group shared code into a bundle and put page scripts into their own bundles.

Referencing bundles

When each asset was treated separately our view pages had to reference each file. For example:

@{
    Bundles.Reference("scripts/dashboard/index.js");
    Bundles.Reference("scripts/dashboard/user.js");
    Bundles.Reference("scripts/dashboard/other.js");
}

This can be simplified to a single reference to the bundle directory:

@{
    Bundles.Reference("scripts/dashboard");
}

Please note: Referencing a specific asset will still work, however this will also include all the assets in the bundle. Bundles are "all or nothing".

This also applies to reference within assets. For example, an asset in one bundle can reference another bundle.

/// <reference path="~/scripts/lib" />

// jQuery is in the 'lib' bundle, so we can now use it in this file.
jQuery(document).ready(function() {
    ...
});

However, you will lose Visual Studio IntelliSense when referencing like this.