Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions blazor/common/aot-compilation/optimize-performance-blazor-wasm.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
---
layout: post
title: Optimize Performance in Blazor WASM using AOT Compilation - Syncfusion
description: Check out the documentation for Optimize Performance using AOT Compilation in Blazor WebAssembly in Blazor
title: Optimize Blazor WASM performance with AOT compilation - Syncfusion
description: Enable AOT compilation in Blazor WebAssembly to improve performance, understand trade-offs, and review size versus performance considerations and more details.
platform: Blazor
component: Common
control: Common
documentation: ug
---

# Optimize Performance in Blazor WebAssembly using AOT Compilation
# Optimize Blazor WebAssembly performance with AOT compilation

This article explains how to improve the performance of **Blazor WebAssembly (WASM)** applications using **Ahead-of-Time (AOT) compilation**, specifically for applications using **Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components**.
This article explains how to improve the performance of Blazor WebAssembly (WASM) Apps using **Ahead-of-Time (AOT) compilation**, including apps that use Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.

## AOT Compilation Overview

Blazor WebAssembly applications run entirely in the browser via WebAssembly. By default, the app’s .NET assemblies are downloaded and executed using a **Just-In-Time (JIT)** interpreter. However, enabling **AOT compilation** ahead of time converts the .NET Intermediate Language (IL) into native WebAssembly at build time, resulting in significant performance gains.
Blazor WebAssembly Apps run entirely in the browser via WebAssembly. By default, the app’s .NET assemblies are downloaded and executed using a **Just-In-Time (JIT)** interpreter. Enabling AOT compilation converts .NET Intermediate Language (IL) into native WebAssembly at build time, which can provide significant performance gains.

## Enable AOT Compilation

Follow the steps below to configure AOT for your Blazor WASM project.
Follow these steps to configure AOT for a Blazor WebAssembly App.

**Prerequisites:** Target .NET 8 or later and publish in Release configuration.

### Step 1: Target .NET 8+

Expand Down Expand Up @@ -62,7 +64,7 @@ bin/Release/net8.0/publish/wwwroot/
---

## Size vs Performance Tradeoff
The following table compares performance and size metrics for Blazor WebAssembly with and without AOT, using a Syncfusion<sup style="font-size:70%">&reg;</sup> Grid with paging enabled.
The following sample metrics compare performance and size for Blazor WebAssembly with and without AOT, using a Syncfusion<sup style="font-size:70%">&reg;</sup> Grid with paging enabled.

| Metric | Without AOT | With AOT |
|----------------------------|----------------------|----------------------|
Expand All @@ -71,32 +73,32 @@ The following table compares performance and size metrics for Blazor WebAssembly
| Bundle Size (Brotli) | ~114 MB | ~192 MB |
| Memory Usage | Slightly lower | Slightly higher |

> [AOT compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#ahead-of-time-aot-compilation) increases the application size but significantly improves load time, interactivity and overall runtime performance in Blazor WebAssembly applications.
> [AOT compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#ahead-of-time-aot-compilation) increases app size but can significantly improve load time, interactivity, and overall runtime performance in Blazor WebAssembly apps.

---

## Limitations

- **Longer Build Time:** AOT compilation is slower compared to standard builds.
- **Increased Bundle Size:** Final WebAssembly size is larger.
- **Higher Memory Usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution.
- **Reduced Flexibility:** Dynamic features (e.g., reflection) may require additional handling.
- **More Complex Debugging:** Source map support is limited.
- **Slower Iterations:** Any code change needs full rebuild, affecting dev productivity.
- **Longer build time:** compared to standard builds.
- **Increased bundle size:** Final WebAssembly size is larger.
- **Higher memory usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution.
- **Reduced flexibility:** Dynamic features (e.g., reflection) may require additional handling.
- **More complex debugging:** Source map support is limited.
- **Slower iterations:** Any code change needs full rebuild, affecting dev productivity.

---

## Considerations

- **Better Performance:** Native WebAssembly improves execution speed and UI responsiveness.
- **Enhanced Security:** Native code is harder to reverse-engineer than Intermediate Language code.
- **Cross-Platform Consistency:** Consistent behavior across browsers and devices.
- **Better performance:** Native WebAssembly improves execution speed and UI responsiveness.
- **Enhanced security:** Native code is harder to reverse-engineer than Intermediate Language code.
- **Cross-platform consistency:** Consistent behavior across browsers and devices.

---

## Specific Recommendations

To further reduce published output size, [enable linker and trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming) options in your `.csproj`:
To further reduce published output size, [enable linker and trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming) options in the `.csproj`.

```xml
<PublishTrimmed>true</PublishTrimmed>
Expand Down
26 changes: 13 additions & 13 deletions blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Reduce Size of Blazor WebAssembly Application - Syncfusion
description: Check out the documentation for reduce size of blazor webassembly application in blazor using various techniques
title: Reduce size of Blazor WebAssembly Applications - Syncfusion
description: Learn here all about how to reduce Syncfusion Blazor WebAssembly (WASM) App size using trimming and linker configuration. Explore here to more details.
platform: Blazor
component: Common
control: Common
documentation: ug
---

# Reduce Size of Blazor WebAssembly Application
# Reduce size of Blazor WebAssembly Application

This article explains how to reduce the size of **Blazor WebAssembly (WASM)** applications. Although [Ahead-of-Time (AOT)](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#ahead-of-time-aot-compilation) compilation improves performance, it also increases the app size. To help reduce this, you can enable code trimming options in our projects. Trimming automatically removes unused code from the final output, which helps lower the bundle size without affecting functionality. This is especially helpful when using large projects.
This article explains how to reduce the size of **Blazor WebAssembly (WASM)** applications. Although [Ahead-of-Time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#ahead-of-time-aot-compilation) improves performance, it also increases app size. To reduce size, enable code trimming options in projects. Trimming removes unused code from the final output, helping lower the bundle size without affecting functionality.

## Configure the Linker for ASP.NET Core Blazor

Blazor WebAssembly uses [Intermediate Language (IL) linking](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#trim-net-il-after-ahead-of-time-aot-compilation) to trim unused code from the final output during build. This process is **only enabled in Release builds** and is **disabled in Debug configuration** by default. To take full advantage of trimming and reduce the size of the published application, it is recommended to **build your app in Release mode** before deployment.
Blazor WebAssembly uses [Intermediate Language (IL) linking](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#trim-net-il-after-ahead-of-time-aot-compilation) to trim unused code from the final output during build. This process is only enabled in Release builds and is disabled in Debug by default. To take full advantage of trimming and reduce the size of the published app, publish in Release mode before deployment.

> Always publish your Blazor WebAssembly app using the `Release` configuration to enable trimming and optimize performance.

### Disable Intermediate Language Linking (Optional)
### Disable Intermediate Language linking (optional)

To manually disable Intermediate Language linking, add the following MSBuild property in your `.csproj` file:

Expand All @@ -28,7 +28,7 @@ To manually disable Intermediate Language linking, add the following MSBuild pro
```
## Enable trimming

**PublishTrimmed** property enables code trimming for self-contained publishing.It automatically disables features that aren’t compatible with trimming and provides warnings about trimming conflicts during build.
The **PublishTrimmed** property enables code trimming for self-contained publishing. It automatically disables features that are not compatible with trimming and provides warnings about trimming conflicts during build.

To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming), add the following to your `.csproj` file:

Expand All @@ -40,21 +40,21 @@ To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/tri

## Trim mode

For all assemblies in a Blazor application, trimming is enabled by default from the.NET 8 target framework. Trim warnings may cause problems for applications that have previously used `PublishTrimmed=true` and `TrimMode=partial`. However, if your application compiles without any trim warnings, this default behavior shouldn't interfere with functionality or cause issues. For more information, refer to the [trim configuration](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer?view=aspnetcore-9.0) documentation to achieve this.
For all assemblies in a Blazor application, trimming is enabled by default starting with the .NET 8 target framework. Trim warnings may occur for apps that previously used `PublishTrimmed=true` and `TrimMode=partial`. If the app compiles without trim warnings, this default behavior should not affect functionality. For more information, refer to the [trim configuration](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer) documentation.

### To Resolve trim warnings

Partial trimming is less aggressive and may be safer for applications that use reflection. To ensure smooth builds, resolve all trim warnings in our application, make the below changes in our `.csproj` to resolve the trim warnings
Partial trimming is less aggressive and may be safer for applications that use reflection. To ensure smooth builds, resolve all trim warnings in the application. If needed, make the following change in the `.csproj` file:

```xml
<TrimMode>partial</TrimMode>
```

## Enable Link Trimming

To control **Intermediate Language (IL)** trimming on a per-assembly basis by supplying an XML configuration file. This approach allows you to explicitly preserve assemblies, types, or members that may be trimmed, even if they are not directly referenced in your application code.
Control Intermediate Language (IL) trimming on a per-assembly basis by supplying an XML configuration file. This approach allows explicitly preserving assemblies, types, or members that may be trimmed, even if they are not directly referenced in application code.

To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor application, update the project file as shown below. This example demonstrates how to safely configure trimming using the Grid paging feature.
To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor application, update the project file as shown below. This example demonstrates how to configure trimming using the Grid paging feature.

#### How to Enable Intermediate Language Trimming Safely for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid

Expand Down Expand Up @@ -107,7 +107,7 @@ To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dot
</assembly>
</linker>
```
3. Prevent Trimming of .NET Core Runtime Types. If your app uses reflection, LINQ expressions, or dynamic operations, consider including a LinkerConfig.xml to preserve critical system libraries. It is completely optional.
3. Prevent trimming of .NET runtime types. If the app uses reflection, LINQ expressions, or dynamic operations, consider including a LinkerConfig.xml to preserve critical system libraries (optional).

```xml
<ItemGroup>
Expand Down
41 changes: 21 additions & 20 deletions blazor/common/best-practices.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,38 @@
---
layout: post
title: Optimizing Syncfusion Blazor App Performance | Best Practices
description: Check out and learn here all about optimal strategies for enhancing Syncfusion Blazor App performance.
title: Best practices to optimize Syncfusion Blazor App performance
description: Learn practical ways to optimize Syncfusion Blazor Apps, including smaller packages, minimal scripts, optimized themes, lazy loading, and PreventRender.
platform: Blazor
component: Common
control: Common
documentation: ug
---

# Best Practices for Improving Syncfusion&reg; Blazor App Performance
# Best practices for optimizing Syncfusion® Blazor App performance

Enhancing the rendering performance of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor apps involves implementing the following best practices.
Improve rendering performance by applying the following best practices.

## Use Individual NuGet Packages
## Use individual NuGet packages

Opt for individual Syncfusion<sup style="font-size:70%">&reg;</sup> NuGet packages for specific components. This approach allows you to selectively include only the necessary components, minimizing overhead. For detailed information, refer to [Benefits of Using Individual NuGet Packages](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages).
Use individual Syncfusion<sup style="font-size:70%">&reg;</sup> NuGet packages for specific components. This lets the app include only what it needs and reduces download size. Learn more in [Benefits of using individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages).

## Reduce Script Reference Size
## Reduce script reference size

The overall `syncfusion-blazor.min.js` script reference may be redundant. Instead, consider employing the following solutions to include only the required scripts for rendering Syncfusion<sup style="font-size:70%">&reg;</sup> components.
* [Individual reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#individual-control-script-reference)
* [Blazor custom resource generator](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)
The overall `syncfusion-blazor.min.js` may include scripts the app doesn't use. Prefer referencing only the required scripts using one of the following options:

## Use Optimized CSS Themes
- [Individual reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#individual-control-script-reference)
- [Blazor Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)

To reduce CSS payload and improve rendering speed, use optimized CSS themes provided by Syncfusion. These themes are tailored to include only the styles required for the components you use. Learn more at Optimized CSS Themes
https://blazor.syncfusion.com/documentation/appearance/themes#optimized-css-themes
## Lazy Loading in Blazor WebAssembly App
## Use optimized CSS themes

If you're using a Blazor WebAssembly app, consider implementing lazy loading to reduce the initial loading time. For guidance, refer to Microsoft's documentation on [WebAssembly lazy load assemblies](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-7.0) and Syncfusion's blog on [lazy loading Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor assemblies](https://www.syncfusion.com/blogs/post/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application.aspx).
To reduce CSS payload and improve rendering speed, use optimized CSS themes that include only the styles required by the components in use. Learn more in [Optimized CSS themes](https://blazor.syncfusion.com/documentation/appearance/themes#optimized-css-themes).

## Utilize PreventRender Option in Blazor WebAssembly App
## Lazy loading in Blazor WebAssembly App

In a Blazor WebAssembly app, leverage the **PreventRender** option to avoid unnecessary re-rendering of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components. This ensures optimal performance. For reference, we have provided links for the DataGrid and PivotTable:
If using a Blazor WebAssembly App, implement lazy loading to reduce initial load time. See [WebAssembly lazy load assemblies](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies) and the Syncfusion blog on [lazy loading Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor assemblies](https://www.syncfusion.com/blogs/post/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application.aspx).

* DataGrid: [Link to WebAssembly performance documentation](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance)
* PivotTable: [Link to WebAssembly performance documentation](https://blazor.syncfusion.com/documentation/pivot-table/webassembly-performance)
## Use PreventRender in Blazor WebAssembly App

In a Blazor WebAssembly App, use the `PreventRender` option to avoid unnecessary re-rendering of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components and improve performance. For details, see:

- DataGrid: [WebAssembly performance](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance)
- Pivot Table: [WebAssembly performance](https://blazor.syncfusion.com/documentation/pivot-table/webassembly-performance)
Loading