Blazor WebAssembly apps can become pretty large (10+ MB), every Blazor app includes the dotnet runtime compatible with WebAssembly, and of course all of your app's dependencies.

Microsoft is working on getting the download size as small as possible, with techniques like tree shaking. This means that unused code won't be included in the Release build.

But there are also some things we can do ourselves.

The documentation here is helpful: https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0

Before I started reducing my app size, it was 14.4 MB.

.CSPROJ

I addes these lines to my csproj

<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
<BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>

This reduced the size to 13.7 MB

Then I added

<InvariantGlobalization>true</InvariantGlobalization>

It went to 12.5 MB

You should only include these lines if your app does not use any Timezone or culture specific globalization functions. Please check the documentation on the link above.

Newtonsoft.Json

After that, I analyzed and removed all packages that have a dependency on Newtonsoft.Json. I had to create my own fork of RestEase for that. I removed the Newtonsoft.Json dependency and used System.Text.Json instead. The fork can be found here and is also available on NuGet: https://github.com/michielpost/RestEase

The app is now only 11 MB! Blazor WebAssembly already includes System.Text.Json, so it's best to use that, because it does not add anything to your app size. But if you use Newtonsoft.Json, over 1 MB will be added to your apps download size.

.NET 6

Next steps? Let's try out .NET 6! .Net 6 preview 3 is available and upgrading reduced the size to 10.6 MB.

Almost 4 MB gone from our 14.4 MB starting point (-26%).

Let's hope we can further reduce the app size with the next preview versions of .NET 6

Compression

Twitter user mistermag00 notified me that compression can also make a huge impact: https://twitter.com/mistermag00/status/1395357490787794944

Originally I didn't look at compression, because I assumed Blazor took care of that. And that's true. When making a Release build, three versions of each files are generated.

  • filename Uncompressed
  • filename.gz Compressed with GZip compression
  • filename.br Compressed with Brotli

But the server is responsible to serve the right files. ASP.Net will do that for you, but when hosting your Blazor app on GitHub pages or Skynet this doesn't work. Luckily, you can force the Blazor app to download the Brotli files with a small change in your index.html.

With forced downloading of the Brotli files, the app size went to 4.4 MB!

Check out the documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#compression

.NET 6 with Brotli enabled

Progress: https://github.com/michielpost/SkyDocs/pull/11

Preview 3: 4.3 MB Preview 4: 4.4 MB