feat: add assets trimming to/in fluent blazor wasm

🙋 Feature Request

🤔 Expected Behavior

The service injection should allow people to specify what they need.

😯 Current Behavior

Related #225 Not being able to trim the assets introduced by Fluent Blazor in a WASM SPA app has multiple downsides:

• It increases deployment length (downtime, failures risk, CD costs…)
• It increases assets service workers size (from a couple of KBs to 2.5 MBs)
• It decreases performance and user satisfaction with the app

All those issues reduce my incentive of using these components as opposed to other design languages.

💁 Possible Solution

builder.Services.AddFluentUIComponents();

Would bring everything like it does today.

builder.Services.AddFluentUIComponents(x => x.AddAll24Icons());

Would add all icons of size 24

builder.Services.AddFluentUIComponents(x => x.AddAllLozalizedIcons("fr"));

Would add all icons localizations for the French locale

builder.Services.AddFluentUIComponents(x => x.AddIcons(FluentIcons.Home));

Would add all the Home icons variants

builder.Services.AddFluentUIComponents(x => x.AddIconsFor<FluentFlipper>());

Would add all basic icons for the flipper component

builder.Services.AddFluentUIComponents(x => x.AddIconsFor<FluentFlipper>()
                                                                             .AddAll24Icons()
                                                                             .AddIcons(FluentIcons.Home)
                                                                             .AddAllLozalizedIcons("fr")
);

Would add a union of all the sets mentioned above.

🔦 Context

I’ve build a blazor wasm app, added fluent UI blazor, and published the app

dotnet new blazorwasm
dotnet add package Microsoft.Fast.Components.FluentUI --prerelease

Added builder.Services.AddFluentUIComponents() in Program.cs Added <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest> within the PropertyGroup tag. Added <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" /> with a ItemGroup tag.

dotnet publish -c Release

The output service worker is now 2.5MBs and the content folder is now 7MBs.

💻 Examples

CC @jeepNL

[vnbaaij]

I haven’t tried it yet, but I’m guessing the worker size is still going to be an issue. To solve that, we would probably need to write custom logic for the MSBuild phase. And if we want to control what gets cached we need to modify the logic in onInstall in service-worker.published.js as described here: https://learn.microsoft.com/aspnet/core/blazor/progressive-web-app#background-updates. It’s on the ToDo list…

[vnbaaij]

I tried excluding the svg files by adding a regular expression to the offlineAssestsExclude line in the service-worker.pubished.js file. However, the svg files are stlll being included in the wwwroot folder and, more importantly, in the service-worker-assets file. I’m asking around internally if there is a solution for this.