Reducing Blazor WebAssembly download size
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.
I addes these lines to my
This reduced the size to 13.7 MB
Then I added
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.
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.
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
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.gzCompressed with GZip compression
filename.brCompressed 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
Preview 3: 4.3 MB Preview 4: 4.4 MB