原文作者: Wael Kdouh

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

我聊下最近我在做的事情,然后分享下在Blazor WebAssembly 微前端的实现细节,这篇文章是我的一些心得,以及一个示例的 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 实现微前端的更多相关文章

  1. 「译」JUnit 5 系列:条件测试

    原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...

  2. 「译」JUnit 5 系列:扩展模型(Extension Model)

    原文地址:http://blog.codefx.org/design/architecture/junit-5-extension-model/ 原文日期:11, Apr, 2016 译文首发:Lin ...

  3. 「译」JavaScript 的怪癖 1:隐式类型转换

    原文:JavaScript quirk 1: implicit conversion of values 译文:「译」JavaScript 的怪癖 1:隐式类型转换 译者:justjavac 零:提要 ...

  4. jvm系列(十):如何优化Java GC「译」

    本文由CrowHawk翻译,是Java GC调优的经典佳作. 本文翻译自Sangmin Lee发表在Cubrid上的"Become a Java GC Expert"系列文章的第三 ...

  5. jvm系列(七):如何优化Java GC「译」

    本文由CrowHawk翻译,地址:如何优化Java GC「译」,是Java GC调优的经典佳作. Sangmin Lee发表在Cubrid上的”Become a Java GC Expert”系列文章 ...

  6. iOS 9,为前端世界都带来了些什么?「译」 - 高棋的博客

    2015 年 9 月,Apple 重磅发布了全新的 iPhone 6s/6s Plus.iPad Pro 与全新的操作系统 watchOS 2 与 tvOS 9(是的,这货居然是第 9 版),加上已经 ...

  7. 「译」forEach循环中你不知道的3件事

    前言 本文925字,阅读大约需要7分钟. 总括: forEach循环中你不知道的3件事. 原文地址:3 things you didn't know about the forEach loop in ...

  8. 「译」Blazor VS React React / Angular / Vue.js

    原文作者: Christian Findlay 原文链接: https://christianfindlay.com/2020/06/04/blazor-vs-react-angular-vue-js ...

  9. 「译」使用 System.Net.Http.Json 高效处理Json

    在这篇文章,我将介绍一个名为 System.Net.Http.Json 的扩展库,它最近添加到了 .NET 中,我们看一下这个库能够给我们解决什么问题,今天会介绍下如何在代码中使用. 在此之前我们是如 ...

随机推荐

  1. PyQt(Python+Qt)学习随笔:QAbstractItemView的tabKeyNavigation属性

    老猿Python博文目录 老猿Python博客地址 tabKeyNavigation属性为bool类型,用于控制视图中是否启用tab键和backtab(shift+tab)进行数据项之间的导航切换. ...

  2. HDFS客户端操作(JAVA代码)

    环境准备 windows需要配置hadoop的windows下的依赖 安装包地址: 链接:https://pan.baidu.com/s/1QtbH-x-S0QytkmaoSosdEw 提取码:2kt ...

  3. 使用eslint将项目中的代码修改统一的缩进

    背景 继承了组里师兄师姐写的项目的前端代码,但是是两个人写的,有两格缩进的,有四格缩进的,有字符串外用单引号的,有用双引号的. 于是搜索了一下,可以用eslint强制转化. eslint在github ...

  4. Robot Framework+adb框架自动化测试Android设备案例⑹——源码地址、测试报告

    一.源码地址 GitHub:https://github.com/xiongye105554598/DVR8010_AutoTest 二.测试报告

  5. 庐山真面目之七微服务架构Consul集群、Ocelot网关集群和IdentityServer4版本实现

    庐山真面目之七微服务架构Consul集群.Ocelot网关集群和IdentityServer4版本实现 一.简介      在上一篇文章<庐山真面目之六微服务架构Consul集群.Ocelot网 ...

  6. STL—— 容器(vector)的各种功能方法

    1. 获取容器的元素个数 size() 使用 vectorName.size() 可以输出这个容器中类型的个数,如下代码: 1 #include <iostream> 2 #include ...

  7. Vue高仿网易云网页端源码

      音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾, 而且偶然间发现 pc 端 web 版的网易云音乐做的实在是太简陋了, 社区仿 pc 客户端的网易云也不多见,为了弥补这个遗憾, 就用 ...

  8. Linux相关知识基础

    目录 前言 第一章 Linux远程连接管理 1. 为什么要远程连接Linux系统 2. 连接前的小知识 2.2.1 IP地址 2.2.2 端口的概念 2.2.3 协议的概念 3. 远程连接Linux的 ...

  9. 【面试专栏】Java并发编程:volatile关键字

    1.  内存模型 若一个变量在多线程环境下同时操作,则可能出现结果不一致的情况.这就是常说的缓存不一致性问题. 解决缓存不一致问题,通常有两个解决方案: 通过在总线加LOCK#锁的方式 因为CPU和其 ...

  10. jQuery的事件机制和其他知识

    jQuery 设置宽度和高度 宽度操作: $(selector).height(); //不带参数表示获取高度 $(selector).height(200); //带参数表示设置高度   宽度操作: ...