How To Minify Your CSS Files and JavaScript Files With Umbraco

Having a well-optimized website should be the aim for anyone reading this.  To figure out how optimized your website is you can use tools such as GT Metrix to run a Pagespeed, or, Y Slow test to see where the bottlenecks within your pages are.

If you're loading multiple CSS files or Javascript files on within your page, then GT Metrix will penalize your score.  Luckily, as we work with .NET, the framework comes with reasonable CSS/JS bundling solution out the box.  As we're using Umbraco however, we have to do a few more tweaks to make the out of the box bundling work.  If you want to learn how to do that, then read on.

How To Use ASP.NET Bundling and Minifications in Umbraco

There are a few ways to get bundling and minification. You can get to use more frontend tools like grunt/gulp, however, there's also a C# way. As I'm a C# guy, you can guess the way I'm going.

First, you'll need to install the Microsoft.AspNet.Web.Optimization NuGet package. You can do this by typing in the following in the package manager console.

PM> Install-Package Microsoft.AspNet.Web.Optimization

Next, you need to create a new class and call it BundleConfig.cs. This class is where we'll add the code to minify the scripts and styles. An example of the bundle.config I use on this site is shown below:

      public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle().Include(
                                         "~/css/bootstrap.css",
                                        "~/css/font-awesome.css",
                                        "~/css/owl.carousel.css",
                                        "~/css/owl.theme.default.css",
                                         "~/css/style.css"));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/js/jquery-3.2.1.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                      "~/js/jquery.validate.js",
                      "~/js/jquery.validate.unobtrusive.js"));

            bundles.Add(new ScriptBundle("~/bundles/misc").Include(
                 "~/js/classie.js",
                 "~/js/functions.js"));
        }
    }
  

The code is pretty self-explanatory. You can use the 'StyleBundle' to process CSS and you can use ScriptBundle to process JS. When you create a Bundle, you give it a route, in my example "~/bundles/css". This route can be anything you want. It has to be unique though. Also, as we use Umbraco we need to create a separate rule for Umbraco to ignore the path, so it's best to keep with the 'bundle' prefix if you are following this tutorial. Also, as we're minimising the code, you don't need to use the min versions of any libraries you use. From my experience, if you use the min versions, you'll likely get JS errors, as it tries to minify a minified file :P

Register The Config Within Your Global.ascx

To ensure that Umbraco uses this new config file, you need to register it within your OnApplicationStarted method in your global.ascx, like this:

    public class MvcApplication : Umbraco.Web.UmbracoApplication
    {
        protected override void OnApplicationStarted(object sender, EventArgs e)
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

Next, you need to add the tags into your layout, like this:

    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/backstretch")
    @Scripts.Render("~/bundles/carousel")

All you do is use either the scripts or styles helpers render method and pass in the bundle you want to display, via the route name. In a normal MVC website, this would be it, however, when we use Umbraco, the Umbraco router will try and route your new bundles to an Umbraco page and 404. To get around this, within your web.config, you'll need to add a route exception, within your UmbracoReservedUrls setting, like so:

    <add key="umbracoReservedUrls" value="~/config/splashes/booting.aspx,~/install/default.aspx,~/config/splashes/noNodes.aspx,~/VSEnterpriseHelper.axd, ~/bundles"/>

Let's See The Magic

Now everything is set-up, what should happen is that if you run the site with debugging enabled within your web.config, then your CSS and JS will render as normal. When you publish to your live site, you need to make sure that the debug is enabled = false. When this happens the bundling will kick in and minify everything. You can see what it should look like here.

 

Minify Your CSS Files and JavaScript Files Takeaway

That's all you have to it, the bundling and minification process is pretty much the same as a normal MVC site.  When you use Umbraco you just need to remember to add in an exception within the umbracoReservedUrls

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top