前端微服务化

1. 前端微服务化是什么？

        前端微服务化就是微服务架构在前端方向的实施。在这种模式下，每个前端应用都是完全独立的，这其中包括了：技术栈独立，开发、部署、构建独立，并且能够自主运行。最后通过模块化的方式组合出一个完整的前端应用。

        这种方式意味着，一个页面上同时存在两个及两个以上的前端应用在运行。而之前我们讲的路由分发方案则是一个页面只有一个应用。

        也就是说，当我们单击指向某个应用的路由时，会加载、运行对应的应用。而原有的一个或多个应用，仍然可以在页面上保持运行的状态。同时，这些应用可以使用不同的技术栈来开发，就像图中显示的，可以同时运行使用react、vue、和angular框架开发的应用。

2. 前端微服务化有什么特性？

        前端微服务化模式是通过在不同的框架之上设计通信、加载机制，来实现在一个单页面内加载多个应用的。我们希望一个可行的微服务架构应该具备以下两个特性：

1. 应用可以自动加载、运行，并能够与应用注册表进行联系；

2. 每个应用的开发是完全隔离的，开发时互不影响。

这里我们需要关注两个点：

1. 应用的配置：

   1. 应用的挂在DOM节点

   2. 应用的服务地址

   3. 应用的唯一标识

   4. 应用的名称

   5. 应用所需要加载的脚本文件

2. 应用的加载：

   1. 在加载应用时的事件绑定及应用入口

   2. 在卸载应用时的时间解绑

3. 前端微服务化架构的工作流

这个图展现的是前端微服务架构的工作流程：

1. 在主工程运行时，从服务器获取最新的应用配置（这里也可以不需要使用注册表，直接配置在前端本地）；

2. 在主工程获取配置后，逐个创建应用，并为每个微应用绑定对应的生命周期；

3. 当主工程监听到路由变化时，就会去寻找是否有与该路由对应的微应用，最后加载匹配到的微应用。 在这个工作流成中，主工程-基座应用起到了以下作用：

4. 管理其他子应用；

5. 负责应用间通信；

6. 设计路由响应机制

4. 微前端落地面临的两大共性问题

        所有的微前端框架都会面临这两大共性问题，只有解决了这两块问题，才能称得上是一个合理可行的方案：

1. 应用的加载与切换

   1. 路由：父应用与子应用路由配置；父子应用之间的跳转

   2. 应用加载：预加载和按需加载

   3. 应用入口：HTML Entry、Config Entry

2. 应用的隔离与通信

   1. JS沙箱：子应用之间互不影响（包括全局变量、事件等）

   2. CSS隔离：子应用之间样式互不影响，切换时装载和卸载

   3. 父子通信：子应用如何调用父应用方法，父应用如何下发状态

5. 社区有哪些开源的微前端框架？