使用Web Components 构建前端微服务

介绍

前端微服务，即将微服务的理念应用于web端，将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。

前端框架的多样性、版本的多样性导致很多前端项目技术战不统一，所用框架版本不统一。如vue经历了从2.0到3.0更新之后，提供了全新的组织代码的思维方式，这个时候如果在使用vue2的旧的项目上升级vue3，重构成本会很高，甚至会影响线上项目的稳定运行。所以较多的解决情况是：旧的项目仍然使用vue2，新的项目开始采用vue3，即在不重写原来项目的基础上，又可以开始开发新的任务。

微前端的优势就在这里，可以去兼容不同类型的前端框架而不会影响用户体验。并且随着单页面应用（SPA）的项目形态越来越流行，微前端可以将庞大的应用进行拆分并随之解耦，每个部分单独进行维护和部署，提升效率。

特点

理想的前端微服务，应该符合一下特性：

• 无关技术
• 独立开发
• 独立部署
• 不影响用户体验

实现方式

1. 路由分发：使用HTTP服务器的路由重定向多个应用，通过路由将不同的业务分发到不同的独立前端应用上，具体可以通过HTTP的反向代理实现，或者是应用框架自带的路由解决。

2. 在不同的框架之上设计通讯、加载机制：通过组合多个独立应用、组件来构建一个单体应用。所有的前端框架目前都离不开基本的DOM。我们只需要在页面合适的地方引入或者创建DOM，并在用户操作时，加载对应的应用，触发应用启动和卸载应用等。

3. 使用iFrame创建容器及自定义消息传递机制：iFrame可以创建一个全新的宿主环境，这意味着所有前端应用之间可以相互独立运行。需要设置加载机制和通讯机制，即如何加载、卸载应用，如何监听应用事件等。

4. 使用web Component 技术构建应用