Blazor Themes is too big

[Dimitar]

Hello,

How i can use only the theme that I want? Currently i have all themes in my _content folder and it is 230+MB. I do not think it is normal to have 230mb of files that is not used.

Regards,

Dimitar

Attachment: Screenshot_1_2ead7ea6.png

[Dimitar]

And _content\Syncfusion.Blazor\styles is 233mb

460 mb of unused styles ?

Attachment: Screenshot_2_6349571.png

[Athiswaran Veerasekaran]

Hi Dimitar,

Greetings from Syncfusion Support!

To optimize your app's static file size, ensure that only the necessary Syncfusion theme is included. Consider the following options:

1.Use CDN for Syncfusion Themes

The most efficient way to reduce your app's footprint is to use Syncfusion theme CSS files directly from a CDN, instead of bundling them with the app. This will drastically reduce the size of your app and avoid adding large CSS files to your published folder.

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/29.2.4/styles/bootstrap5.css" rel="stylesheet"/>

For more details, check the documentation mentioned below.

https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

 

2.Use Custom Resource Generator to Optimize Scripts and Styles 

Utilize Custom Resource Generator to generate only the required scripts and styles for your selected Syncfusion controls to optimize performance by including only necessary dependencies, and integrate it into your app.

 

3.Remove Unused Static Files from the Publish Folder

If you prefer to keep the theme files locally but want to remove unused files to reduce the published folder size, you can use MSBuild to remove the unnecessary theme files from the wwwroot/_content/Syncfusion.Blazor.Themes folder during the publish process.

Here’s an example of how to remove unused theme CSS files (like bootstrap5.css) before publishing:

For .net8.0:

            <Target Name="RemoveUnusedSyncfusionThemes" AfterTargets="Publish">

                           <ItemGroup>

                                         <FilesToRemove Include="$(PublishDir)wwwroot/_content/Syncfusion.Blazor.Themes/**"

                                                                                       Exclude="$(PublishDir)wwwroot/_content/Syncfusion.Blazor.Themes/bootstrap5.css;" />

                           </ItemGroup>

                           <!-- Remove the files -->

                           <Delete Files="@(FilesToRemove)" />

            </Target>

For .net9.0:

<Target Name="RemoveUnusedSyncfusionThemes" AfterTargets="Publish">

                           <ItemGroup>

                                         <FilesToRemove Include="$(PublishDir)wwwroot/_content/Syncfusion.Blazor.Themes/**"

                                                                                       Exclude="$(PublishDir)wwwroot/_content/Syncfusion.Blazor.Themes/bootstrap5.css;$(PublishDir)wwwroot/_content/Syncfusion.Blazor.Themes/bootstrap5.css.gz;$(PublishDir)wwwroot/_content/Syncfusion.Blazor.Themes/bootstrap5.css.br;" />

                           </ItemGroup>

                           <!-- Remove the files -->

                           <Delete Files="@(FilesToRemove)" />

            </Target>

 

This MSBuild task ensures that only the CSS files you want to keep (e.g., bootstrap5.css, tailwind.css, etc.) will remain in the published output. All other theme files will be removed, reducing the size of your published folder.

 

Regards,

Athiswaran V