「译」用 Blazor WebAssembly 实现微前端

原文作者: Wael Kdouh
原文链接:https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f325

「译」用 Blazor WebAssembly 实现微前端

我聊下最近我在做的事情,然后分享下在Blazor WebAssembly 微前端的实现细节,这篇文章是我的一些心得,以及一个示例的 Demo 项目,展示了如何使用Blazor 实现多模块分布式的应用程序的微前端,如下图所示。

「译」用 Blazor WebAssembly 实现微前端

为了实现上面的架构,这是我使用到了.NET 5 对与 Blazor WebAssembly 的一项新功能,延迟加载,直到需要这些程序集的时候,才开始加载,从而提高Blazor WebAssembly应用程序的启动性能,比如如,只有用户导航到该组件时,才开始加载单个组件的程序集,加载后,程序集将缓存在客户端,可用于以后的所有导航。

「译」用 Blazor WebAssembly 实现微前端

我的示例项目的结构是下边这样

「译」用 Blazor WebAssembly 实现微前端

Blazor 的延迟加载功能允许标记应用程序集,当用户导航到特定路由时,才开始加载程序集,这个功能包括修改程序路由时修改项目文件。

打开我们的 Blazor 项目,然后修改项目 .csproj 文件,在这里标记需要延迟加载的 dll 类型的程序集,然后 Blazor 启动后就不会加载这个程序集,我下边的代码中标记了 WaelsMagicFeature.dll 用于延迟加载,如果设置的程序集有其他的依赖,也需要把依赖程序集设置延迟加载。

「译」用 Blazor WebAssembly 实现微前端

Blazor 的路由组件指定搜索可以访问的路由组件的程序集,当用户访问到路由菜单,路由组件也负责渲染,在应用的路由组件(App.razor) 添加一个 OnNavigateAsync 的回调,当用户第一次直接从浏览器导航到路由时,OnNavigateAsync 被调用执行,如果延迟加载的程序集包含了可路由的组件,添加一个 List<Assembly>,如果程序集包含可路由的组件,则将程序集传递回 AdditionalAssemblies 集合,框架在程序集中搜索路线,并在找到任何新路线时更新路线集合。

OnNavigateAsync有一个NavigationContext参数,该参数提供有关当前异步导航事件的信息,包括目标路径(Path)和取消令牌(CancellationToken), Path属性是相对于应用程序基本路径的用户目标路径,例如 /WaelsMagicComponent, CancellationToken可用于观察异步任务的取消, 用户导航到其他页面时,OnNavigateAsync自动取消当前正在运行的导航任务, 在OnNavigateAsync内部,实现了要指定加载哪些程序集,Options 包含了一个在OnNavigateAsync方法内部的条件检查,将路由映射到程序集名称的查找表中,这些名称可以注入到组件中,也可以在代码内实现。

最后,LazyAssemblyLoader 是框架提供的单例服务来加载程序集,在路由组件注入 LazyAssemblyLoader,它提供了 提供了LoadAssembliesAsync 方法, 该方法使用JS发起了网络调用,获取程序集然后加载到在浏览器中的WebAssembly上执行的运行时中。

「译」用 Blazor WebAssembly 实现微前端

如上所示,这样可以独立地构建/维护不同的模块,按需加载它们。下图显示了导航到 Waels Magic 选项卡后如何按需加载 WaelsMagicComponent,由于应用程序避免在启动时下载所有dll,所以可以加快 Blzaor 程序的启动时间。

「译」用 Blazor WebAssembly 实现微前端

总结

在这篇文章中,我们演示了如何将不同的组件作为独立的库进行维护,另外,我们利用延迟加载来按需加载不同的模块,而不是在启动时就开始加载所有的模板,这样也可以提升程序的启动速度,让用户体验更好。

示例代码:https://github.com/waelkdouh/BlazorMicroFrontend

最后

欢迎扫码关注我们的公众号,专注国外优秀博客的翻译和开源项目分享,也可以添加QQ群 897216102

「译」用 Blazor WebAssembly 实现微前端

发表评论

评论已关闭。

相关文章