I've been unintentionally skipping something in my CI/CD pipeline for my website that reduces the overall file size. 😬

If you didn't know, my website, which is probably where you're reading this, is not your typical website. It's built using Blazor WebAssembly (WASM), so the majority of the site is written in C#. This has a downside of having the overall file size of your website/web app being much larger than what you're used to seeing with just HTML and JavaScript; however, I've apparently been missing one little step that drastically reduces the final size.

The Problem

Due to the nature of how Blazor WASM works, there are some extra files required for a website/web app to work in everyone's web browser. More specifically the .NET runtime converted to WebAssembly. By default, this is the uncompressed size of the file:

One thing to keep in mind is that the file distributed to the web browser is actually compressed with Brotli, so you're not actually downloading 2.36 MB.

The Solution

tl;dr

Simple. Make sure the wasm-tools workload is installed for the dotnet SDK.

You can install it by running this command:

dotnet workload install wasm-tools

The long answer

Installing wasm-tools adds an extra step when running dotnet publish with the release config: Runtime relinking. This basically trims the .NET runtime of code that your website/web app does not use.

This was the size of the .NET runtime WebAssembly:

That's a 1.39 MB difference!

So I added this step to my build and deploy workflow on GitHub before I run dotnet publish:

- name: Install wasm-tools
  run: dotnet workload install wasm-tools