Quick Tip: CSS & JS bundling and minification with Umbraco

Is it possible to setup automated bundling / minification of the stylesheets and javascript in my Umbraco website?

uSkinned member

Yes. Umbraco has something called ClientDependency built right into the core, thanks to Shannon from Umbraco HQ. You can read more about the power of ClientDependency here: https://github.com/Shazwazza/ClientDependency.

The following tutorial will show you how you can utilise ClientDependency today to bundle and minify your stylesheets (CSS) and javascript (JS). Once you've bundled and minified your CSS and JS you will note improvements in your general website page speed which will ultimately improve your SEO and user-experience.

 

Step 1.

Locate the master template file for your Umbraco website. In our uSkinned themes you can find this here: Login to CMS > Go to Settings > Expand Templates > Open Master 

At the top of the file we will want to first call in ClientDependency. See below.

@using ClientDependency.Core.Mvc;

In a uSkinned theme the top 5 lines of your Master template should now look somehting like this:

@inherits UmbracoViewPage
@using ClientDependency.Core.Mvc;
@{
    Layout = null;
}

Step 2.

Now you need to tell your master template what CSS files to bundle and minify. See below.

Code Before

<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/plugins.css" />
<link rel="stylesheet" href="~/css/base.css" />
<link rel="stylesheet" href="~/css/palette.css" />
<link rel="stylesheet" href="~/css/layout.css" />

Code After 

@{ 
    Html.RequiresCss("~/css/bootstrap.css");
    Html.RequiresCss("~/css/plugins.css");
    Html.RequiresCss("~/css/base.css");
    Html.RequiresCss("~/css/palette.css");
    Html.RequiresCss("~/css/layout.css");
}
@Html.RenderCssHere()

Rendered Code

The name of the file will be unique to your website although it will be similar to the following.

<link href="/DependencyHandler.axd?s=L2Nzcy9ib290c3RyYXAuY3NzOy9jc3MvcGx1Z2lucy5jc3M7L2Nzcy9iYXNlLmNzczsvY3NzL3BhbGV0dGUuY3NzOy9jc3MvbGF5b3V0LmNzczs&t=Css&cdv=1" type="text/css" rel="stylesheet"/>

 

Step 3.

Now you need to tell your master template what JS files to bundle and minify. See below.

Code Before

<script src="~/scripts/bootstrap.js"></script>
<script src="~/scripts/plugins.js"></script>
<script src="~/scripts/application.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>

After

 @{ 
    Html.RequiresJs("~/scripts/bootstrap.js");
    Html.RequiresJs("~/scripts/plugins.js");
    Html.RequiresJs("~/scripts/application.js");
    Html.RequiresJs("~/scripts/jquery.unobtrusive-ajax.min.js");
}
@Html.RenderJsHere()

Rendered Code

The name of the file will be unique to your website although it will be similar to the following.

<script src="/DependencyHandler.axd?s=L3NjcmlwdHMvYm9vdHN0cmFwLmpzOy9zY3JpcHRzL3BsdWdpbnMuanM7L3NjcmlwdHMvYXBwbGljYXRpb24uanM7L3NjcmlwdHMvanF1ZXJ5LnVub2J0cnVzaXZlLWFqYXgubWluLmpzOw&t=Javascript&cdv=1" type="text/javascript"></script>

 That's it. Your CSS and JS have all been bundled and minified :-)

 

BONUS Tip

Something I came across recently was how to render your bundled and minified CSS for screen or print media only. In the following instance we want to target screen media only.

Before

Html.RequiresCss("~/css/layout.css");

After

Html.RequiresCss("~/css/layout.css", new { media = "screen" });

Rendered Code

The name of the file will be unique to your website although it will be similar to the following.

<link href="/DependencyHandler.axd?s=L2Nzcy9ib290c3RyYXAuY3NzOy9jc3MvcGx1Z2lucy5jc3M7L2Nzcy9iYXNlLmNzczsvY3NzL3BhbGV0dGUuY3NzOy9jc3MvbGF5b3V0LmNzczs&t=Css&cdv=1" type="text/css" rel="stylesheet" media="screen/>

 

comments powered by Disqus

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.