Minification and Bundling in Umbraco

The Microsoft ASP.NET Web Optimization Framework improves the performance and reliability of your application through bundling, minification and versioning of your web resources. Bundling multiple scripts or stylesheets into one resource saves overhead by requiring browsers to make fewer HTTP requests; minification entails shortening the variable names and eliminating whitespace in your resources, thereby reducing file size; appending a version to your bundles ensures visitors to your site will use the current resources rather than stale, cached versions with the same file name.

For the purpose of this tutorial, I will assume you have already installed the Umbraco CMS package to your web project. Details of my development environment are as a follows:

• Windows 8.1 Professional
• Visual Studio 2013 Professional
• Umbraco 7.2.1 Nuget package installed to an empty web project

To get started, you need to install two Nuget packages. Do this by opening the Package Manager Console under Tools > Nuget Package Manage > Package Manager Console. Inside the console, type the following command, followed by the enter key:

Install-Package Microsoft.AspNet.Web.Optmization

Next, type the following command, followed by the enter key:

Install-Package WebActivatorEx

As you may have guessed, the first command installs the Web Optimization Framework. The second command installs the Web Activator package, allowing us to conveniently execute start-up code in our application.

Now, under the web project in your solution explorer, create a folder named App_Start. Within this folder, add a class titled BundleConfig.cs. While we’re at it, also add a class in this folder titled UmbracoPluginInitializer.cs.

Within BundleConfig, your class should look similar to the sample below. You will need to modify the files and their paths to match that of your project. Be sure to change the namespace to match that of your application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace WebApplication2.App_Start
{
public class BundleConfig
{
  
 public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
AddDefaultIgnorePatterns(bundles.IgnoreList);

            bundles.Add(
                new StyleBundle("~/css/css")
                  .Include("~/css/app.css")
            );




            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/scripts/modernizr").Include(
                        "~/js/jquery/modernizr/modernizr.js"));




            bundles.Add(
                new ScriptBundle("~/scripts/vendor")
                  .Include("~/js/jquery/dist/jquery.min.js")
                  .Include("~/js/fastclick/lib/fastclick.js")
                  .Include("~/js/foundation/js/foundation/foundation.js")
                  .Include("~/js/foundation/js/foundation/foundation.abide.js")
                  .Include("~/js/foundation/js/foundation/foundation.interchange.js")
                  .Include("~/js/foundation/js/foundation/foundation.topbar.js")
                  .Include("~/foundation/js/app.js")
            );




        }




        private static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
        {
            if (ignoreList == null)
            {
                throw new ArgumentNullException("BundleConfig ignore list.");
            }




            ignoreList.Ignore("*.intellisense.js");
            ignoreList.Ignore("*-vsdoc.js");
        }
    }

}

The optimizations need to take place as the application starts, but Umbraco utilizes some custom code and doesn’t expose a Global.asax file unlike typical MVC projects. We’ll use the Web Activator package we installed earlier to register the creation of our bundles in the UmbracoPluginInitializer class we created. See the example below for what this class should look like. Again, make sure to change the namespace to match that of your application as well as add necessary references.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using WebActivatorEx;
using WebApplication2.App_Start;

[assembly: PostApplicationStartMethod(typeof(UmbracoPluginInitializer), "PostApplicationStart")]
namespace WebApplication2.App_Start
{
public static class UmbracoPluginInitializer
{
///
/// Runs right after the application has initialized.
///
public static void PostApplicationStart()
{
// Run bundle optimizer.
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}

Open your Web.config file and find the umbracoReservedPaths section under appSettings. Modify it to look like the following so that you can reference your CSS and JavaScript bundles:

Finally, to include the references on your Razor view, add a reference to System.Web.Optimization and call the associated render method on the view. See below for an example.

@using System.Web.Optimization

@Styles.Render("~/css/css")
@Scripts.Render("~/scripts/modernizr")
@Scripts.Render("~/scripts/vendor")

Umbraco JavaScript CSS Optimization