「译」用 Blazor WebAssembly 实现微前端
原文作者: Wael Kdouh
原文链接:https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f325
我聊下最近我在做的事情,然后分享下在Blazor WebAssembly 微前端的实现细节,这篇文章是我的一些心得,以及一个示 1044 例的 Demo 项目,展示了如何使用Blazor 实现多模块分布式的应用程序的微前端,如下图所示。
为了实现上面的架构,这是我使用到了.NET 5 对与 Blazor WebAssembly 的一项新功能,延迟加载,直到需要这些程序集的时候,才开始加载,从而提高Blazor WebAssembly应用程序的启动性能,比如如,只有用户导航到该组件时,才开始加载单个组件的程序集,加载后,程序集将缓存在客户端,可用于以后的所有导航。
我的示例项目的结构是下边这样
Blazor 的延迟加载功能允许标记应用程序集,当用户导航到特定路由时,才开始加载程序集,这个功能包括修改程序路由时修改项目文件。
打开我们的 Blazor 项目,然后修改项目 .csproj 文件,在这里标记需要延迟加载的 dll 类型的程序集,然后 Blazor 启动后就不会加载这个程序集,我下边的代码中标记了 WaelsMagicFeature.dll 用于延迟加载,如果设置的程序集有其他的依赖,也需要把依赖程序集设置延迟加载。
Blazor 的路由组件指定搜索可以访问的路由组件的程序集,当用户访问到路由菜单,路由组件也负责渲染,在应用的路由组件(App.razor) 添加一个
OnNavigateAsync的回调,当用户第一次直接从浏览器导航到路由时,OnNavigateAsync 被调用执行,如果延迟加载的程序集包含了可路由的组件,添加一个
List<Assembly>,如果程序集包含可路由的组件,则将程序集传递回 AdditionalAssemblies 集合,框架在程序集中搜索路线,并在找到任何新路线时更新路线集合。
OnNavigateAsync有一个NavigationContext参数,该参数提供有关当前异步导航事件的信息,包括目标路径(Path)和取消令牌(CancellationToken), Path属性是相对于应用程序基本路径的用户目标路径,例如 /WaelsMagicComponent, CancellationToken可用于观察异步任务的取消, 用户导航到其他页面时,OnNavigateAsync自动取消当前正在运行的导航任务, 在OnNavigateAsync内部,实现了要指定加载哪些程序集,Options 包含了一个在OnNavigateAsync方法内部的条件检查,将路由映射到程序集名称的查找表中,这些名称可以注入到组件中,也可以在代码内实现。
最后,LazyAssemblyLoader 是框架提供的单例服务来加载程序集,在路由组件注入 LazyAssemblyLoader,它提供了
提供了LoadAssembliesAsync方法, 该方法使用JS发起了网络调用,获取程序集然后加载到在浏览器中的WebAssembly上执行的运行时中。
如上所示,这样可以独立地构建/维护不同的模块,按需加载它们。下图显示了导航到 Waels Magic 选项卡后如何按需加载 WaelsMagicComponent,由于应用程序避免在启动时下载所有dll,所以可以加快 Blzaor 程序的启动时间。
总结
在这篇文章中,我们演示了如何将不同的组件作为独立的库进行维护,另外,我们利用延迟加载来按需加载不同的模块,而不是在启动时就开始加载所有的模板,这样也可以提升程序的启动速度,让用户体验更好。
示例代码:https://github.com/waelkdouh/BlazorMicroFrontend
最后
欢迎扫码关注我们的公众号,专注国外优秀博客的翻译和开源项目分享,也可以添加QQ群 897216102
- Blazor Webassembly本地化的实现
- Blazor WebAssembly 3.2.0 已在塔架就位 将发射新一代前端SPA框架
- ASP.NET Core Blazor WebAssembly实现一个简单的TODO List
- 浅析基于WEB前端页面的页面内容搜索的实现思路
- 利用jQuery.i18n实现web前端的国际化
- WEB前端自定义字体的实现方法
- 使用 jQuery.i18n.properties 实现Web 前端的国际化
- 【web前端实践】-----实现面板拖拽效果
- JS调用C层接口(webAssembly技术,环境配置到代码实现)
- Web前端开发实战2:二级下拉式菜单之JS实现
- Web前端面试指导(三十四):如何实现浏览器内多个标签页之间的通信?
- web前端,jquery实现瀑布流总结6,jQuery 事件 - scroll() 方法 滚动
- web前端,jquery实现列表点击条目改变样式并拿到属性值总结1index()
- 【web前端】团购类网站倒计时的js实现
- 浅谈WEB跨域的实现(前端向)
- 【图解】Web前端实现相似Excel的电子表格
- C#无限分级实现,前端WEB页面接收,后台提供层级Json数据
- web前端培训:JQuery实现键盘打字游戏
- JavaScript-JS命名空间的构造和实现-[web前端开发]
- web前端学习笔记---实现雪花飘落的效果