You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/common/aot-compilation/optimize-performance-blazor-wasm.md
+21-19Lines changed: 21 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,25 @@
1
1
---
2
2
layout: post
3
-
title: Optimize Performance in Blazor WASM using AOT Compilation - Syncfusion
4
-
description: Check out the documentation for Optimize Performance using AOT Compilation in Blazor WebAssembly in Blazor
3
+
title: Optimize Blazor WebAssembly performance with AOT compilation - Syncfusion
4
+
description: Enable AOT compilation in Blazor WebAssembly to improve performance, understand trade-offs, and review size versus performance considerations and more details.
5
5
platform: Blazor
6
-
component: Common
6
+
control: Common
7
7
documentation: ug
8
8
---
9
9
10
-
# Optimize Performance in Blazor WebAssembly using AOT Compilation
10
+
# Optimize Blazor WebAssembly performance with AOT compilation
11
11
12
-
This article explains how to improve the performance of **Blazor WebAssembly (WASM)** applications using **Ahead-of-Time (AOT) compilation**, specifically for applications using **Syncfusion<supstyle="font-size:70%">®</sup> Blazor components**.
12
+
This article explains how to improve the performance of Blazor WebAssembly (WASM) Apps using **Ahead-of-Time (AOT) compilation**, including apps that use Syncfusion<supstyle="font-size:70%">®</sup> Blazor components.
13
13
14
14
## AOT Compilation Overview
15
15
16
-
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.
16
+
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 compilationconverts .NET Intermediate Language (IL) into native WebAssembly at build time, which can provide significant performance gains.
17
17
18
18
## Enable AOT Compilation
19
19
20
-
Follow the steps below to configure AOT for your Blazor WASM project.
20
+
Follow these steps to configure AOT for a Blazor WebAssembly App.
21
+
22
+
**Prerequisites:** Target .NET 8 or later and publish in Release configuration.
The following table compares performance and size metrics for Blazor WebAssembly with and without AOT, using a Syncfusion<supstyle="font-size:70%">®</sup> Grid with paging enabled.
67
+
The following sample metrics compare performance and size for Blazor WebAssembly with and without AOT, using a Syncfusion<supstyle="font-size:70%">®</sup> Grid with paging enabled.
> [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.
76
+
> [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.
75
77
76
78
---
77
79
78
80
## Limitations
79
81
80
-
-**Longer Build Time:** AOT compilation is slower compared to standard builds.
81
-
-**Increased Bundle Size:** Final WebAssembly size is larger.
82
-
-**Higher Memory Usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution.
83
-
-**Reduced Flexibility:** Dynamic features (e.g., reflection) may require additional handling.
84
-
-**More Complex Debugging:** Source map support is limited.
85
-
-**Slower Iterations:** Any code change needs full rebuild, affecting dev productivity.
82
+
-**Longer build time:** compared to standard builds.
83
+
-**Increased bundle size:** Final WebAssembly size is larger.
84
+
-**Higher memory usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution.
85
+
-**Reduced flexibility:** Dynamic features (e.g., reflection) may require additional handling.
86
+
-**More complex debugging:** Source map support is limited.
87
+
-**Slower iterations:** Any code change needs full rebuild, affecting dev productivity.
86
88
87
89
---
88
90
89
91
## Considerations
90
92
91
-
-**Better Performance:** Native WebAssembly improves execution speed and UI responsiveness.
92
-
-**Enhanced Security:** Native code is harder to reverse-engineer than Intermediate Language code.
93
-
-**Cross-Platform Consistency:** Consistent behavior across browsers and devices.
93
+
-**Better performance:** Native WebAssembly improves execution speed and UI responsiveness.
94
+
-**Enhanced security:** Native code is harder to reverse-engineer than Intermediate Language code.
95
+
-**Cross-platform consistency:** Consistent behavior across browsers and devices.
94
96
95
97
---
96
98
97
99
## Specific Recommendations
98
100
99
-
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`:
101
+
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`.
Copy file name to clipboardExpand all lines: blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,23 @@
1
1
---
2
2
layout: post
3
-
title: Reduce Size of Blazor WebAssembly Application - Syncfusion
4
-
description: Check out the documentation for reduce size of blazor webassembly application in blazor using various techniques
3
+
title: Reduce size of Blazor WebAssembly Applications - Syncfusion
4
+
description: Learn here all about how to reduce Syncfusion Blazor WebAssembly (WASM) App size using trimming and linker configuration. Explore here to more details.
5
5
platform: Blazor
6
-
component: Common
6
+
control: Common
7
7
documentation: ug
8
8
---
9
9
10
-
# Reduce Size of Blazor WebAssembly Application
10
+
# Reduce size of Blazor WebAssembly Application
11
11
12
-
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.
12
+
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.
13
13
14
14
## Configure the Linker for ASP.NET Core Blazor
15
15
16
-
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.
16
+
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.
17
17
18
18
> Always publish your Blazor WebAssembly app using the `Release` configuration to enable trimming and optimize performance.
19
19
20
-
### Disable Intermediate Language Linking (Optional)
20
+
### Disable Intermediate Language linking (optional)
21
21
22
22
To manually disable Intermediate Language linking, add the following MSBuild property in your `.csproj` file:
23
23
@@ -28,7 +28,7 @@ To manually disable Intermediate Language linking, add the following MSBuild pro
28
28
```
29
29
## Enable trimming
30
30
31
-
**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.
31
+
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.
32
32
33
33
To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming), add the following to your `.csproj` file:
34
34
@@ -40,21 +40,21 @@ To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/tri
40
40
41
41
## Trim mode
42
42
43
-
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.
43
+
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/aspnet/core/blazor/host-and-deploy/configure-trimmer) documentation.
44
44
45
45
### To Resolve trim warnings
46
46
47
-
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
47
+
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:
48
48
49
49
```xml
50
50
<TrimMode>partial</TrimMode>
51
51
```
52
52
53
53
## Enable Link Trimming
54
54
55
-
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.
55
+
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.
56
56
57
-
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<supstyle="font-size:70%">®</sup> Blazor application, update the project file as shown below. This example demonstrates how to safely configure trimming using the Grid paging feature.
57
+
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<supstyle="font-size:70%">®</sup> Blazor application, update the project file as shown below. This example demonstrates how to configure trimming using the Grid paging feature.
58
58
59
59
#### How to Enable Intermediate Language Trimming Safely for Syncfusion<supstyle="font-size:70%">®</sup> Blazor Grid
60
60
@@ -107,7 +107,7 @@ To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dot
107
107
</assembly>
108
108
</linker>
109
109
```
110
-
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.
110
+
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).
The following methods can be used to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor components dynamically:
162
162
163
-
1. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment?view=aspnetcore-8.0) with [Razor Template Syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0#razor-templates)
164
-
2. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment?view=aspnetcore-8.0) with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder?view=aspnetcore-8.0) methods
1. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment) with [Razor template syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components#razor-templates)
164
+
2. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment) with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder) methods
The `RenderFragment` represents the segments of UI content that can be reused in the view page based on the application logic.
170
170
171
-
You can use [Razor Template Syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0#razor-templates) to define the `RenderFragment` in the view page.
171
+
You can use [Razor template syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components#razor-templates) to define the `RenderFragment` in the view page.
172
172
173
173
The following code demonstrates the RenderFragment that renders the `SfButton` component.
174
174
@@ -212,9 +212,9 @@ The following code demonstrates the RenderFragment that renders the `SfGrid` com
212
212
213
213
## RenderFragment with RenderTreeBuilder methods
214
214
215
-
You can define the RenderFragment delegate with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder?view=aspnetcore-8.0)'s methods.
215
+
You can define the RenderFragment delegate with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder) methods.
216
216
217
-
N> Refer to [Manual RenderTreeBuilder logic](https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-8.0#manual-rendertreebuilder-logic) to know more about RenderTreeBuilder.
217
+
N> Refer to [Manual RenderTreeBuilder logic](https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios#manual-rendertreebuilder-logic) to learn more about RenderTreeBuilder.
218
218
219
219
```cshtml
220
220
@RenderSfButton()
@@ -295,7 +295,7 @@ You can create a simple Blazor component with the `BuildRenderTree` method and g
295
295
296
296
1. Right-click on the `~/Pages` folder in the Visual Studio and select `Add -> Class` to create a new class file (SyncTextBox.cs).
297
297
298
-
2. Inherit the newly created class with [ComponentBase](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase?view=aspnetcore-7.0) and override the [BuildRenderTree](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.buildrendertree?view=aspnetcore-7.0) method to create the component.
298
+
2. Inherit the newly created class with [ComponentBase](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase) and override the [BuildRenderTree](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.buildrendertree) method to create the component.
0 commit comments