Blazor Basics: WebAssembly Ahead-of-Time AOT Compilation

Without JIT, we couldn’t use Reflection because we wouldn’t have the .NET type information available at runtime. The compiler turns the source code into Intermediate Language (IL) code stored in .dll files. By compiling the application to WebAssembly before deployment, you eliminate the need for Just-In-Time (JIT) compilation during execution. To make the AOT compilation configurable you can use a variable in your project file, as shown below.

This pattern lets the app continue working during outages, which is essential in logistics, field operations, or manufacturing environments. Static assets, AOT-compiled WASM modules, and API responses behave differently and require different strategies to avoid stale data or unnecessary downloads. By default, browsers keep old service workers running until all tabs close, meaning users may continue running outdated versions. Service workers operate as a network proxy for the app.

You have to try it with your application to see how the result is in a particular use case. That’s also why AOT compilation is only performed when publishing the application and only in the Release configuration. Now, say we want to use AOT compilation for a Blazor WebAssembly application. It is usually only relevant in high-scale situations where you must deploy multiple application instances. This benefits cloud deployments because less bandwidth is consumed when deploying the application. With ahead-of-time (AOT) compilation, we compile the C#, F# or Visual Basic .NET code to machine code instead of Intermediate Language (IL) code.

Projects using the build tools that must support both .NET 6 and a later release must use multi-targeting.Use the wasm-tools-net6 workload for .NET 6 projects when developing apps with the .NET 7 SDK. Since the compiled executables include the runtime libraries, they considerably increase their size compared to JIT-compiled applications that run on the target system’s .NET runtime. However, depending on the application code, startup time might not improve as much, or the application size might not grow as much compared to other applications. AOT compilation increases app size but can significantly improve load time, interactivity, and overall runtime performance in Blazor WebAssembly apps. With the .NET WebAssembly build tools installed, runtime relinking is performed automatically when an app is published in the Release configuration.

One of the largest parts of a Blazor WebAssembly app is the WebAssembly-based .NET runtime (dotnet.wasm) that the browser must download when the app is first accessed by a user’s browser. In the context of Blazor web applications using the WebAssembly interactivity mode, the application code is compiled into WebAssembly, the native code for the browser’s platform. The applications can run on systems that don’t have the .NET runtime installed. With .NET 8 and Blazor, developers have powerful tools at their disposal to create high-performance web applications. One effective way to enhance the performance of your Blazor applications is by utilizing the @key directive when rendering lists. In Blazor applications, this can significantly improve the initial loading time by only loading assemblies and components when they are required.

1.3 Decision Matrix: Choosing Pure WASM vs. Hosted WASM

The .NET WebAssembly build tools are based on Emscripten, a compiler toolchain for the web platform. ImportantRuntime relinking trims class instance JavaScript-invokable .NET methods unless they’re protected. sweepstakes You can also join us in our weekly livestreamed community meeting—we’d love to hear about what you’re building with .NET/C#! Since this example uses HTTP, it’s also a great candidate to run on wasmCloud.

Enabling the ‘Ahead-of-time (AOT) compilation’ in the Project Properties will automatically add the following two PropertyGroup sections to your Blazor WebAssembly project (.csproj) file. Lastly, AOT compilation can make a huge difference to the performance of your application. You will find that your application will likely double in size after enabling AOT compilation. Although the default approach performs well in many scenarios, it can be relatively slow when performing intensive work or rendering complex user interfaces. However, the default mechanism employed by Blazor to achieve this is not the most optimal for runtime performance. Blazor WebAssembly facilitates the development of SPAs (Single-page applications) that run in the browser using C# instead of JavaScript as the primary programming language.

The developer doesn’t need to use language-specific bindings for the common APIs included in WASI P2—they can simply compile a component and move on. Our goal here is to get a feel for the „idiomatic” development experience that is possible when a language toolchain supports native WASI P2 compilation. At the moment, componentize-dotnet only works on Windows. If you’re a Visual Studio Code user, you may also want to install the C# Dev Kit extension, but in this walkthrough, we’ll stick to the command line. The NativeAOT-LLVM compiler supports WASI P2 (with both .NET 8 and 9), giving developers native WASI P2 support. Building WebAssembly components in .NET/C# is easier than ever before.

• AOT compilation addresses this performance issue by compiling an app’s .NET code directly into WebAssembly for native WebAssembly execution by the browser.
• At the moment, componentize-dotnet only works on Windows.
• For teams that want more .NET-native parallelism, .NET’s multithreading support for WASM is evolving.
• I recommend that you remove the first property group so that the AOT compilation will only run for Release builds.
• This keeps the initial application lightweight while preserving modular extensibility.

3.1 Why Frequent JS–.NET Calls Hurt Performance

This reduces memory pressure, improves rendering speed, and ensures consistency across devices, including mid-range laptops and tablets. Even on strong machines, diffing large lists consumes time every time state updates. Rendering thousands of rows or complex component grids increases diffing cost and memory usage. This is essential for editable lists, data-entry forms, and anything where UI state must remain stable across updates.

What is AOT?

Without enabling AOT compilation, Blazor WebAssembly apps run on the browser using a .NET Intermediate Language (IL) interpreter implemented in WebAssembly. The drawback to using AOT compilation is that AOT-compiled apps are generally larger than their IL-interpreted counterparts, so they usually take longer to download to the client when first requested. Blazor WebAssembly supports ahead-of-time (AOT) compilation, where you can compile your .NET code directly into WebAssembly. The following list shows which workload to install for each .NET SDK, depending on the apps that you plan to target.