微前端入门必看:https://alili.tech/archive/ea599f7c/
single-spa中文文档:http://www.mianshigee.com/tutorial/single-spa-5.x-zh/
入门初试文档:https://www.cnblogs.com/scdisplay/p/11648701.html#!comments
微前端的应用场景?
- 项目技术栈过于老旧,相关技能的开发人员少,功能扩展吃力,重构成本高,维护成本高.
- 项目过于庞大,代码编译慢,开发体差,需要一种更高维度的解耦方案.
- 单一技术栈无法满足你的业务需求
微前端需要解决的问题与挑战?
- 我们如何实现在一个页面里渲染多种技术栈?
- 不同技术栈的独立模块之间如何通讯?
- 如何通过路由渲染到正确的模块?
- 在不同技术栈之间的路由该如何正确触发?
- 项目代码被切割之后,通过何种方式合并到一起?
- 我们的每一个模块项目如何打包?
- 前端微服务化后我们该如何编写我们的代码?
- 独立团队之间该如何协作?
单体应用对比微前端
微前端架构理解
可以理解:将包装后的各个独立子应用挂载到主应用的指定dom上,存在一个加载控制器,能够让主应用找到对应的子应用,并加载它。
加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用。
包装器:有了加载器,可以把现有的应用包装,使得加载器可以使用它们。
主应用:一般是包含所有子应用公共部分的项目
子应用:众多展示在主应用内容区的应用
所以是这么个概念:加载器→包装器→️主应用→️子应用
总的来说是这样一个流程:用户访问index.html后,浏览器运行加载器的js文件,加载器去配置文件,然后注册配置文件中配置的各个子应用后,首先加载主应用(菜单等),再通过路由判定,动态远程加载子应用。
预备知识
- SystemJs
SystemJS提供通用的模块导入途径,支持传统模块和ES6的模块。
SystemJs有两个版本,6.x版本是在浏览器中使用的,0.21版本的是在浏览器和node环境中使用的,两者的使用方式不同。(参考:https://github.com/systemjs/systemjs)
在微服务中主要充当加载器的角色。
- singleSpa
single-spa是一个在前端应用程序中将多个javascript应用集合在一起的框架。主要充当包装器的角色。(参考:http://www.mianshigee.com/tutorial/single-spa-5.x-zh/)
singleSpa
Single-spa 包括以下内容:
1.Applications
,每个应用程序本身就是一个完整的 SPA (某种程度上)。 每个应用程序都可以响应 url 路由事件,并且必须知道如何从 DOM 中初始化、挂载和卸载自己。 因此,每个应用程序都拥有自己的生命周期。
- Load:决定加载哪个应用,并绑定生命周期
- bootstrap:获取静态资源
- Mount:安装应用,如创建 DOM 节点
- Unload:删除应用的生命周期
- Unmount:卸载应用,如删除 DOM 节点、取消事件绑定
2.可以理解为:存在一个应用程序注册表,我们需要把可调度的应用程序注册进来,才有后面的调度过程。 single-spa-config
配置文件就是做这个事情, 每个应用程序都注册了三件东西
- A name
- A function (加载应用程序的代码)
- A function (确定应用程序何时处于活动状态/非活动状态)