How to bundle & minify your Javascript and CSS in Umbraco

Umbraco CMS 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

On your local machine, open your Umbraco website root folder in Visual Studio Code.

Step 2

Open the file ~/web.config

Step 3

Locate the line:

<compilation defaultLanguage="c#" debug="true" batch="true" targetFramework="4.7.2" numRecompilesBeforeAppRestart="50" />

Step 4

Change debug="true" to debug="false".

Save the file.

Your site is now bundling all stylesheet and script files.

Step 5

Make sure to upload the file to your live environment.

Step 1

On your local machine, open your Umbraco website root folder in Visual Studio Code.

Step 2

Open the file ~/Views/Partials/USN_THEME/USNWebsiteFooterSection/USN_FooterScripts.cshtml

@inherits UmbracoViewPage<USNWebsite.USNModels.USNBaseViewModel>

@{
    <!-- Scripts -->
    <script src="@(Model.ScriptPath)/jquery-3.4.1.min.js"></script>
    <script src="@(Model.ScriptPath)/modernizr-2.8.3.min.js"></script>
    <script src="@(Model.ScriptPath)/popper-1.14.7.min.js"></script>
    <script src="@(Model.ScriptPath)/bootstrap-4.3.1.min.js"></script>
    <script src="@(Model.ScriptPath)/jquery.validate-1.19.0.min.js"></script>
    <script src="@(Model.ScriptPath)/jquery.validation-unobtrusive-3.2.11.min.js"></script>

    <!-- Slide Carousel Script -->
    <script src="@(Model.ScriptPath)/slick-carousel-1.8.1.min.js"></script>

    <!-- Lightbox Script -->
    <script src="@(Model.ScriptPath)/ekko-lightbox-5.3.0.min.js"></script>

    <!-- Instagram Feed Script -->
    <script src="@(Model.ScriptPath)/instagramfeed-1.3.6.js"></script>

    <!-- uSkinned Scripts -->
    <script src="@(Model.ScriptPath)/plugins.js"></script>
    <script src="@(Model.ScriptPath)/application.js"></script>
    <script src="@(Model.ScriptPath)/jquery.unobtrusive-ajax.js"></script>
}

Step 3

Replace the code from Step 2 with the following code and then save the file.

@inherits UmbracoViewPage<USNWebsite.USNModels.USNBaseViewModel>
@using ClientDependency.Core.Mvc

@{
    Html.RequiresJs(Model.ScriptPath + "/jquery-3.4.1.min.js");
    Html.RequiresJs(Model.ScriptPath + "/modernizr-2.8.3.min.js");
    Html.RequiresJs(Model.ScriptPath + "/popper-1.14.7.min.js");
    Html.RequiresJs(Model.ScriptPath + "/bootstrap-4.3.1.min.js");
    Html.RequiresJs(Model.ScriptPath + "/jquery.validate-1.19.0.min.js");
    Html.RequiresJs(Model.ScriptPath + "/jquery.validation-unobtrusive-3.2.11.min.js");
    Html.RequiresJs(Model.ScriptPath + "/slick-carousel-1.8.1.min.js");
    Html.RequiresJs(Model.ScriptPath + "/ekko-lightbox-5.3.0.min.js");
    Html.RequiresJs(Model.ScriptPath + "/instagramfeed-1.3.6.js");
    Html.RequiresJs(Model.ScriptPath + "/plugins.js");
    Html.RequiresJs(Model.ScriptPath + "/application.js");
    Html.RequiresJs(Model.ScriptPath + "/jquery.unobtrusive-ajax.js");
} 
@Html.RenderJsHere()

Step 4

Open the file ~/Views/Partials/USN_THEME/USNWebsiteHeadSection/USN_StyleSheets.cshtml

@inherits UmbracoViewPage<USNWebsite.USNModels.USNBaseViewModel>

@{
    UsnglobalSettings globalSettings = (UsnglobalSettings)Model.GlobalSettings;
    <!-- uSkinned Icons CSS -->
    <link rel="stylesheet" href="@Model.CssPath/icons.css">
    <!-- Bootstrap CSS -->
    if (globalSettings.EnableRightToLeftText)
    {
        <link rel="stylesheet" href="@Model.CssPath/bootstrap-4.3.1.min-RTL.css">
    }
    else
    {
        <link rel="stylesheet" href="@Model.CssPath/bootstrap-4.3.1.min.css">
    }
    <!-- Slick Carousel CSS -->
    <link rel="stylesheet" href="@Model.CssPath/slick-carousel-1.8.1.min.css">
    <!-- Lightbox CSS -->
    <link rel="stylesheet" href="@Model.CssPath/ekko-lightbox-5.3.0.min.css">
    <!-- uSkinned Compiled CSS -->
    <link rel="stylesheet" href="/style.axd?styleId=@(Model.StyleID)">
}

Step 5

Replace the code from Step 4 with the following code and then save the file.

@inherits UmbracoViewPage<USNWebsite.USNModels.USNBaseViewModel>
@using ClientDependency.Core.Mvc;

@{
    UsnglobalSettings globalSettings = (UsnglobalSettings)Model.GlobalSettings;
    if (globalSettings.EnableRightToLeftText)
    {
         Html.RequiresCss(Model.CssPath + "/bootstrap-4.3.1.min-RTL.css");
    }
    else
    {
         Html.RequiresCss(Model.CssPath + "/bootstrap-4.3.1.min.css");
    }
    Html.RequiresCss(Model.CssPath + "/slick-carousel-1.8.1.min.css");
    Html.RequiresCss(Model.CssPath + "/ekko-lightbox-5.3.0.min.css");
    Html.RequiresCss(Model.CssPath + "/icons.css");
    @Html.RenderCssHere()
    <link rel="stylesheet" href="/style.axd?styleId=@(Model.StyleID)">
}

Please note, if you are using a Umbraco 8 theme.

Step 6

Open the file ~/Views/USNMaster.cshtml

At line 2 you should see the following code:

@using USNStarterKit.USNHelpers

Directly after that line paste the following code and save the file.

@using ClientDependency.Core.Mvc;

Step 7

You should now check your ~/web.config file found in the root of your website solution. Locate this line:

<compilation defaultLanguage="c#" debug="true" batch="true" targetFramework="4.7.2" numRecompilesBeforeAppRestart="50" />

Make sure your debug status is set to "false" to enable bundling.

<compilation defaultLanguage="c#" debug="false" batch="true" targetFramework="4.7.2" numRecompilesBeforeAppRestart="50" />

How to bundle & minify your Javascript and CSS in Umbraco

Get started today