Bundling & Minification in Sitecore MVC

June 5, 2017 | Stefan Perales

Overview

Bundling and minification are two practices that improve page load times by decreasing both the number of server requests and the size of static asset files. There are multiple ways to implement these optimizations, and which one you choose will depend on the project and the practices and technologies you use. One common way to implement this is to add the bundling and minification as tasks in a Gulp or Grunt build. We’re going to discuss a different method, though, which has been available since version 4.0 of ASP.NET MVC: WebGrease. First, let’s quickly go over what exactly bundling and minification are and why they make a difference when it comes to page load performance.

Bundling

Bundling is the process of combining many static assets into a single file. This has the obvious benefit of decreasing the amount of HTTP requests your page makes when it loads. This is more important than it may seem at first glance. Most browsers limit the number of concurrent connections/hostname. Once that limit is met, any additional requests are queued and must wait to be executed. This can result it bloated page load times if you’re using a lot of static resources. Bundling takes the static assets you specify, and merges them into a single file. So, instead of having several requests that could slow the page load times down, you now have a single request. There’s one more cool benefit that bundling provides out of the box. The URL to the bundle that is rendered will have a query string with a cache-busting hash value. This hash will force the browser to download what it sees as a new asset, instead of using its cache. So, after a deployment, users will see your CSS and JS changes right away, instead of seeing a cache of an older version.

Minification

Minification is the process of removing unnecessary whitespace, line breaks and comments and shortening variable names. This decreases the file size and thus decreases the load time for that file.

Enabling Bundling & Minification

1. Install WebGrease

If it’s not already present in your project, you’ll need to add the WebGrease NuGet package to your project. This will make the System.Web.Optimization namespace available.

2. Register Bundles

Next, you’ll want to register your bundles. The most common convention is to create a file called BundleConfigs.cs in your App_Start folder (you may need to create this if it’s not present). Your BundleCofnigs class might look something like this:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Optimization; 
 
namespace Project.App_Start 
{ 
    public class BundleConfigs 
    { 
        public static void RegisterBundles(BundleCollection bundles) 
        { 
            // Bundled CSS 
            bundles.Add(new StyleBundle("~/bundles/css") 
                .Include("~/css/webfonts.css", 
                "~/css/font-awesome/css/font-awesome.css", 
                "~/css/styles.css", 
                "~/css/responsive.css", 
                "~/css/photoswipe.css", 
                "~/css/default-skin/default-skin.css", 
                "~/css/gridscrollfx.css")); 
 
            // Bundled Javascript 
            bundles.Add(new ScriptBundle("~/bundles/js") 
                 .Include("~/FrontEnd/Corporate/js/photoswipe.js", 
                    "~/js/photoswipe-ui-default.js", 
                    "~/js/slider.js", 
                    "~/js/modernizr.custom.js", 
                    "~/js/masonry.custom.js", 
                    "~/js/masonry.pkgd.min.js", 
                    "~/js/imagesloaded.pkgd.js", 
                    "~/js/classie.js", 
                    "~/js/gridScrollFx.js", 
                    "~/js/scripts.js")); 
        } 
    } 
} 

As you can see in this example, 17 requests have been reduced to 2 requests, which would have a noticeable effect on page performance.

Debugging with Bundling & Minification Enabled

You may be wondering how these optimizations effect debugging. After all, won’t debugging these merged and minified files be difficult? Not to worry! The files will only be bundled and minified when you aren't building against the Debug build configuration. While debugging, the un-minified and unbundled assets will be used.

About the Author

Stefan
Stefan Perales

I’m a developer at TBG and I enjoy solving complex problems. When I’m not building websites I like to play my Xbox and build mobile apps.

Leave A Reply

comments powered by Disqus