How to reduce app footprint

[IT VBFK]

Hi 

How do I reduce the app's static files footprint. In my scenario I have installed the Syncfusion.Blazor.Themes package. But this bloats the app size to over 300MB.

After a publish, the folder wwwroot/_content is about 200MB, mostly containing app theme css files.

How can I either strip out unused files or compress all files so that my published docker image doesn't get to 500MB (link in my case now). BTW. I use the official asp.net core runtime image which is only 50MB.

BTW: I had to select a control to submit this, but it hasn't to do with a control...

[Arun Kumar Ragu]

Hi IT VBFK,

Greetings from Syncfusion Support!

To reduce your app's static file footprint and optimize its size, here are two solutions:

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/27.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.  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,

Arun Kumar R