什么是微前端
微前端是一种软件架构,可以将前端应用拆解成一些更小的能够独立开发部署的微型应用,然后在将这些微型应用组合使其成为整体的架构模式。
微前端类似于组件架构,但不同的是,组件不能够独立构建和发布,但是微前端中的应用是可以的。
微前端架构与框架无关,每个微应用都可以使用不同的框架。
微前端的价值
- 增量迁移:项目用的技术栈较老,想使用新的技术栈,如angularJs技术栈改为vue,迁移或者重写成本较高,使用微前端就可以解决上述问题,在保留原项目的同时,使用新框架进行开发。
- 允许单个团队做出决策
- 独立发布
如何实现微前端
- 多个微应用如何进行组合?
在微前端架构中,除了存在多个微应用以外,还存在一个容器应用,每个微应用都需要被注册到容器应用中。微前端中的每个应用在浏览器中都是一个独立的JS模块,通过模块化的方式被容器应用启动和运行。 使用模块化的方式运行应用可以防止不同的微应用在同时运行时发生冲突。
- 在微应用中如何实现路由?
在微前端架构中,当路由发生变化,容器应用首先会拦截路由的变化,根据路由匹配微前端应用,当匹配到微应用以后,再启动微应用路由,匹配具体的页面组件。
- 微应用与微应用之间如何实现状态共享?
在微应用中可以通过发布订阅的方式实现状态共享,比如使用RXjs。
- 微应用与微应用之间如何实现框架和库的共享?
通过import-map 和webpack中的externals属性。
systemJs
在微前端架构中,微应用被打包成模块,并且微前端中是动态导入的,为了灵活性,兼容性,所以需要使用sysemJS实现浏览器中的模块化。
systemJs 是一个用于实现模块化的JS库,有属于自己的模块化规范。
在开发阶段我们可以使用ES模块规范,然后使用webpack将其转为为systemJs支持的模块。
single-spa概述
single-spa 是一个实现微前端架构的框架。
在single-spa框架中有三种类型的微前端应用:
- single-spa-application/parcel: 微前端架构中的微应用,可以使用vue react angular等框架。
- single-spa root config 创建微前端容器应用
- utility modules: 公共模块应用,非渲染组件,用于跨组件共享js逻辑的微应用。