How to prevent unnecessary theme files from being loaded in Blazor Wasm

I have a published an Asp.net core Hosted Wasm App which is running on Azure and everything is working as expected. I just have a concern with what everyone is concerned with, the initial download size of the files needed to run the app.

Currently, for an app which has only two pages running, the download size is well over 100Mb. Upon inspection of the 'Network' tab of the developer tools, I saw that there are at least 8 CSS files being loaded from the server ('domain/_content/Syncfusion.Blazor.Themes/{the 8 files, namely materials.css, materials-dark.css, bootstrap.css, highcontrast.css, fabric.css, bootstrap4.css, fabric-dark.css, bootstrap4-dark.css'}) with a total size of over 45Mb.

The only reference in my code which i have to the '_content/Syncfusion.Blazor.Themes' is on the index.html.

I only need one of these theme files, the default one. I never explicitly changed any theme to any of the controls I have used and the only two controls I have installed on my app is the RichTextEditor and the Spinner.

https://ibb.co/FJc68qh

1 Reply 1 reply marked as answer

AK Aravinth Kumar Syncfusion Team February 16, 2021 04:53 AM UTC

Hi Robert,

Thanks for contacting Syncfusion support.

We have validated your query and we suspect that you are using Progressive Web Application (PWA) with Blazor Webassembly.

https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-5.0&tabs=visual-studio 

We would like to let you know that, the PWA includes all the static web assets files to support offline. That causes loading all the static web assets inside our library and thus increase the app size in the browser. We can resolve it by removing unwanted static web asset references in the wwwroot/service-worker-assets.js file from the app published folder in production build. 
  
 
  
Since you have mentioned that you are using RichTextEditor and Spinner components, you can get those two components style alone from our ThemeStudio web tool and refer it on your application to reduce the file size further. Please refer to the below UG documentation for more details.

https://blazor.syncfusion.com/documentation/appearance/theme-studio/

Please let us know if you need any further assistance on this.

Regards,
Aravinth K
 


Marked as answer
Loader.
Up arrow icon