Minification in ASP.NET Core

Minification is the process of removing all unnecessary characters from the source code without changing its overall functionality. Whitespace, new lines, comments etc. which makes the code more readable but also increases the size of the source code, which in the case of Web Development can make pages slower to load. Only part of this paragraph is from Wikipedia, lol.

I was recently trying to look up some tutorials on minification for ASP core, and although the documentation is there, I couldn’t wrap my head around it easily so thought I’d write a tutorial for others that may have the same issue. There is two areas of minification that I utilize in ASP Core, the actual HTML itself and then my actual css styling. Up until recently I just had everything in a single css file, but split it out to Sass (or SCSS) to make things a bit more maintainable as I was finding that I had multiple classes for the same thing.

Minification of HTML, etc.

This is probably the easist one to implement in your application without having to change some existing stuff already. Add the below package to your project, this will also install WebMarkupMin.Core as a Dependency of .AspNetCoreLatest.

dotnet add package WebMarkupMin.AspNetCoreLatest --version 2.22.1

Once installed, open your Program.cs and add the following BEFORE builder.Build()

builder.Services.AddWebMarkupMin(options =>
{
    // this is your choice, id recommend having it set to false for dev builds though
    options.AllowMinificationInDevelopmentEnvironment = true; 
    // see above comment
    options.AllowCompressionInDevelopmentEnvironment = true;
})
.AddHtmlMinification(config =>
{
    // this setting break certain things, try it with true otherwise change it to false.
    // <li></li> becomes <li> for instance.
    // read more on it here for a basic summary: https://www.tempertemper.net/blog/optional-closing-tags-in-html
    // i personally leave it as false
    config.MinificationSettings.RemoveOptionalEndTags = false;

    // IMPORTANT: this controls attribute quote removal
    config.MinificationSettings.AttributeQuotesRemovalMode = HtmlAttributeQuotesRemovalMode.KeepQuotes;
})
.AddHttpCompression();

builder.Services.Configure<HtmlMinificationSettings>(settings =>
{
    settings.RemoveHtmlComments = true; // Removes comments from your source
    settings.MinifyEmbeddedCssCode = true; // Embedded css gets minified
    settings.MinifyEmbeddedJsCode = true; // Embedded js (<script> at the bottom) gets minified
    settings.MinifyInlineCssCode = true; // inline style='' on tags gets minified
});

And that’s it! Once you run your app and view-source, you’ll see that all whitespace, comments, etc. are gone and if you check the network tab you should notice a decrease in page size. You may notice an improvement in speed, but this depends entirely on how well your app is built in regards to performance in general.

The full documentation for WebMarkupMin is on GitHub but this is a good getting started setup.

Minification of external CSS

This part requires a bit of modification to the way your app works if you’re using a single/multiple .css files rather than .scss, but it’s worth it in the long time for making your life easier and being able to minify your css file/s.

Add the following to your project that contains your wwwroot.

dotnet add package AspNetCore.SassCompiler

Create a sasscompiler.json in the project root, next to your .csproj with the following - further documentation here

{
  "Source": "Styles/site.scss",
  "Target": "wwwroot/css/site.css",
  "Arguments": "--style=compressed",
  "GenerateScopedCss": false,
  "Configurations": {
    "Debug": {
      "Arguments": "--style=expanded" // this keeps your css 'full' with comments in dev mode
    },
    "Release": {
      "Arguments": "--style=compressed"
    }
  }
}

In the root of your project where wwwroot is, create a directory called Styles and then create a master file called site.scss, inside of that file put @use "original"; and then create a file called original.scss and migrate your existing css file into that original file. You can split out later, but this is the easiest approach without changing everything at once.

In your project within your IDE, such as Visual Studio, open your _Layout.cshtml file and change your css to point to css/site.css instead of where it is pointing to at the moment. Once the project builds, it will compile everything from site.scss into that site.css file.

Assuming you build it in Release mode, do a view source of your project and you should see that your new site.css file is minified with all comments gone and all whitespace gone.

If you have any issues, feel free to ping me an email.