微服务架构前端 前端微服务singlespa

说说微前端的概念

微前端是指存在于浏览器中的微服务。

微前端作为用户界面的一部分，通常由多个组件组成，并使用React，Vue和Angular等框架来渲染组件。每个微前端可以由不同的团队进行管理，并可以自主选择框架。虽然在迁移或测试时可以添加额外的框架，出于实用性考虑，建议只使用一种框架。

每个微前端都拥有独立的git仓库，package.json和构建工具配置。因此，每个微前端都拥有独立的逐步推进和独立的部署/ CI。这通常意味着，每个仓库能快速构建。

对比微服务

微服务是指为其提供服务，它们在自己的操作系统中运行，管理自己的数据库并通过网络进行彼此间的通信。

将其与所有存在于单个选项卡中的微前端进行比较：

一个选项卡中的所有浏览器javascript都存在于单个操作系统进程（甚至线程！）。浏览器javascript通常不能直接访问数据库，浏览器选项卡内的通信发生在内存中，而不是通过网络进行通信。

那它们有什么共同点：

• 独立的构建和部署。
• 将DOM视为微前端使用的共享资源。
• 一个微前端的DOM不能够被其他微前端触及，类似于一个微服务的数据库不应该被其他没有权限的微服务触及。

single-spa做了什么？

single-spa是一个顶层路由。当路由处于活动状态时，它会下载并执行该路由的相关代码。

路由的代码被称为应用，每个代码都可以（可选）拥有自己的git仓库、CI进程，并且可以独立部署。这些应用即可以用相同框架实现，也可以用不同框架实现。

single-spa微前端类型

• single-spa applications:为一组特定路由渲染组件的微前端。
• single-spa parcels: 不受路由控制，渲染组件的微前端。
• utility modules: 非渲染组件，用于暴露共享javascript逻辑的微前端。

关于single-spa

single-spa是一个小于5kb（gzip）npm包，用于协调微前端的挂载和卸载。它知道何时基于活动挂载应用程序，并且可以在小型适配器库的帮助下以与框架无关的方式挂载应用程序。

single-spa的不同类型