Reduce Size of a Blazor WASM Application

• Sep 24, 2024
• 2 minutes to read

Deployment size is important, especially if your application is intended to be used on mobile devices because they usually have limited memory resources. Application size increases when you use ahead-of-time (AOT) compilation. If your application targets .NET 7 and later, you can enable trim operations to remove unused code portions of a given library from your application. The library must be compatible with such operations.

Enable Link Trimming for the DevExpress.Data Library

Blazor performs Intermediate Language (IL) trimming in release configuration in published WASM applications. The DevExpress.Data supports this feature for DevExpress Blazor. On other platforms, IL trimming may lead to runtime exceptions and is the reason these operations are disabled by default. To enable trimming for DevExpress.Data, modify the application’s project file as follows:

.csproj

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
    <!-- ... -->
    <ItemGroup>
        <TrimmableAssembly Include="DevExpress.Data.v24.1" />
        <TrimmerRootDescriptor Include="MyRoots.xml" />
        <!-- ... -->
    </ItemGroup>
</Project>

Once ready, create the MyRoots.xml file in the project’s root folder. Add the following content to the newly created file:

<linker>
    <assembly fullname="DevExpress.Data.v24.1">
        <type fullname="DevExpress.Data.Helpers.crtp_*" />
        <type fullname="DevExpress.Data.Helpers.ExpressiveGroupHelpers/crtp_*" />
        <type fullname="DevExpress.Data.Helpers.ExpressiveSortHelpers/crtp_*" />
        <type fullname="DevExpress.Data.Helpers.GenericDelegateHelper/crtp_*" />
        <type fullname="DevExpress.Data.Helpers.GenericEnumerableHelper/crtp_*" />
        <type fullname="DevExpress.Data.Helpers.SummaryValueExpressiveCalculator/crtp_*" />
        <type fullname="DevExpress.Data.Helpers.TreeListNodeComparerBase/crtp_*" />
        <type fullname="DevExpress.Data.Helpers.UnboundSourceCore/UnboundSourcePropertyDescriptor/crtp_*" />
        <type fullname="DevExpress.Data.ListSourceDataController" />
        <type fullname="DevExpress.Data.VisibleListSourceRowCollection/crtp_*" />
        <type fullname="DevExpress.Internal.WeakEventHandler`3">
            <method name="CreateDelegate" />
        </type>
        <!-- Also add the following lines to enable trimming in JavaScript-Based reports -->
        <type fullname="DevExpress.XtraReports.Web.ReportDesigner.*" />
        <type fullname="DevExpress.XtraReports.Web.WebDocumentViewer.*" />
        <type fullname="DevExpress.AspNetCore.Reporting.ReportDesigner.Native.DataContracts.*" />
        <type fullname="DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.DataContracts.*" />
    </assembly>
</linker>

.NET 8 and .NET 9 Specifics

The default trim mode for .NET 8 and .NET 9 Web SDK applications is full. This mode does not work for Blazor applications with DevExpress libraries. Since not all DevExpress libraries support trimming, set the trim mode to partial:

<TrimMode>partial</TrimMode>

Application Size Tests

This section illustrates how trimming of the DevExpress.Data library affects application size. We measured the size of a Blazor WebAssembly test application that contains a DevExpress Grid with 5000 cells:

AOT Status	Trimming Disabled	Trimming Does Not Include DevExpress.Data	Trimming Includes DevExpress.Data
Disabled	55 MB	43.9 MB	39.9 MB
Enabled	188 MB	152 MB	137 MB

Trimming also reduces the transfer size of an application. On the same test application, the results are the following:

AOT Status	Trimming Disabled	Trimming Does Not Include DevExpress.Data	Trimming Includes DevExpress.Data
Disabled	21.4 MB	17.3 MB	16.2 MB
Enabled	45.3 MB	37.1 MB	34 MB

Note that the more components and features you use, the less size link trimming removes.