Optimize Performance of a Blazor WASM Application

• May 29, 2024
• 2 minutes to read

If your application targets .NET 7 and later, you can use the ahead-of-time (AOT) compilation feature to optimize the performance of your Blazor WebAssembly application at the expense of a larger application size.

How AOT Compilation Works

Browsers use an IL interpreter to run Blazor WebAssembly applications. Interpreted code is generally slower than Blazor Server applications. On the other hand, you can use ahead-of-time compilation on a developer machine or build server to produce native WebAssembly code. Browsers on client machines can then leverage native WebAssembly code execution for optimized performance. Refer to Microsoft documentation for more information on AOT: Ahead-of-time (AOT) compilation.

Enable AOT Compilation in an Application

Blazor WASM projects disable ahead-of-time compilation by default. To enable this feature, invoke the project’s context menu and choose Edit Project File:

In the invoked file, set the RunAOTCompilation property to true as follows:

.csproj

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <RunAOTCompilation>true</RunAOTCompilation>
    <!-- ... -->
  </PropertyGroup>
  <!-- ... -->
</Project>

Visual Studio initiates AOT compilation only after you publish a project. To do this, right-click your project in Solution Explorer and choose Publish:

You can also execute the following command in the .NET CLI:

dotnet publish -c Release

Performance Tests

This section illustrates how ahead-of-time compilation affects application performance. We measured a Blazor Grid that renders 5000 cells and performs various operations in a WebAssembly application:

Operation	AOT Disabled	AOT Enabled
DxGrid: Filter 100k rows	220 ms	117 ms
DxGrid: Navigate Between Pages	900 ms	570 ms
DxGrid: Select a row	320 ms	80 ms
DxGrid: Sort 100k rows	1000 ms	950 ms
Switch to another web page	735 ms	420 ms