In older versions of Umbraco (V8 and prior) you could use bundles within the ASP.NET Web Optimization Framework from the .NET Framework to optimise your css and javascript assets.

This worked well, and made managing these items quick and easy.

In .NET 5+ the BuildBundlerMinifier is no longer available, instead we need to generate these files another way, I personally use gulp for this.

A quick start for this, is to install the Bundler & Minifier Visual Studio extension, once you have installed this extension restart Visual Studio.

Next create a file called bundleconfig.json in the root of your web project, and paste in the following code (replacing the links to the assets to your own):

Right click on the bundleconfig.json file, then hover over Bundler & Minifier, and then click on the Convert to Gulp option

This will create a gulpfile.js, you can now remove the Bundler & Minifier Visual Studio extension.

Before you can create the minified files with gulp, you will need to install the packages with the following command:

npm install

You can now run the following command to build the minified files:

gulp min

At this point I recommend excluding the minified files from your source control by adding the following line to your .gitignore

**/wwwroot/bundles

Next you can clean up the bundleconfig.json file created earlier by removing the minify and sourceMap sections.

To configure your views to use the new files you will need to use the BundlerMinifier.TagHelpers which can be installed with the following NuGet package:

dotnet add package BundlerMinifier.TagHelpers

You will want to enable the cache busting querystring, you can do this by adding the following to the ConfigureServices in startup.cs

services.AddBundles(options =>
{
options.AppendVersion = true;
});

Once installed you will need to add the following line to your _ViewImports.cshtml file to make the tag helper accessible:

@addTagHelper *, BundlerMinifier.TagHelpers

Finally in your views containing the links to your css and scripts files, you can replace them with the following:

<bundle name="wwwroot/bundles/site.min.css" />

When you are in debug mode it will generate seperate links to your files:

<link href="/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="/css/site.css" rel="stylesheet" />

When your running in release mode it will bundle your assets and append a cachebusting querystring:

<link href="/bundles/site.min.css?v=Hr2K_e4FFmONl0h--fZbjZJrI6JwyQ7kHuXgHE85RxM" rel="stylesheet" />