For my Umbraco sites (including this one) I use ASP.net client dependency to optimise my css and JavaScript files.

In the layout *.cshtml file this looks like:

@using ClientDependency.Core.Mvc
@{Html
    // Library CSS Files
    .RequiresCss("~/scripts/aos/aos.css")
    .RequiresCss("~/scripts/bootstrap/css/bootstrap.min.css")
    .RequiresCss("~/scripts/bootstrap-icons/bootstrap-icons.css")
    .RequiresCss("~/scripts/glightbox/css/glightbox.min.css")
    .RequiresCss("~/scripts/swiper/swiper-bundle.min.css")

    // Site CSS File
    .RequiresCss("~/css/style.css")
}
@Html.RenderCssHere()

The client dependency library then generates one css file when the layout is first renders, on each subsequent call the same cached css file is used.

Unfortunately Umbraco doesn't have an out of the box solution refreshing this cache when you make a change to one of the css files.

To resolve this I use the CdfHealthChecker package developed by Kevin Jump.

After each change to a referenced dependency I can refresh the cache from the Health Check screen in Umbraco.

Comments