一. 什么是微前端

定义

微前端是一种类似微服务的架构，他将微服务的理念应用到浏览器端。

简单来说，将一个庞大的前端服务拆分为n个小服务，在运行时聚合。

每个小服务可以 独立开发，独立运行，独立部署。

核心价值

其核心价值如下：

• 技术无关
• 独立开发，独立部署
• 增量升级
• 独立运行，多应用之间互不影响

注意：微前端是基于前后端分离的架构下，才有意义。

二. 为什么是微前端

当您遇到如下场景时：

• 1. 维护一个庞大的前端项目，其构建，打包，发布，部署效率低下
• 2. 多团队维护一个庞大的项目，代码版本控制和合并变得困难
• 3. 历史项目中使用旧时代的技术栈，老系统不能抛弃，新技术得不到使用，没精力去重构整个应用
• 4. 多团队，多项目开发，基础库如：react, react-router, antd, 自定义组件库如何更友好的控制统一版本？
• 5. 大型项目中（比如：前端有20个服务），公共资源需要更新，如何做到只更新一处，不需要每个服务都更新，打包，上线
• 6. 浏览器端，多前端服务，如何更好的做到通信？
• 7. 跨公司，跨团队 协作一个项目时，如何优雅高效的落地？
• 8. A应用需要 引用 B应用的 几个页面 或 整个服务。如何0成本引用，并且B服务新版发布，A服务需要自动更新？
• 9. ...

三. 实现微前端的几种方式

iframe

优点

• 完美支持js隔离，样式隔离

缺点

• url 不同步， 浏览器刷新时，iframe中的url 状态会丢失
• iframe局部弹框
• 内外通信效率低下，变量不能共享
• 每次进入，资源都会被重新加载，速度较慢

路由分发式

使用 nginx / k8s ingress 反向代理到不同的前端服务。

优点

• 开发成本低
• 配置简单

缺点

• 多应用之间切换时，每个应用都会重新加载，影响体验（可以思考 传统页面 和 SPA 区别）
• 多应用间不能共享数据
• 多应用间通信困难
• 多应用公共依赖重复加载

web components

优点

• 每个服务拥有独立的脚本和样式

缺点

• 改造成本大
• 各个浏览器兼容不友好
• 多应用公共依赖重复加载

single-SPA

优点

• 良好的体验，多服务切换如同单体SPA
• 具备服务的生命周期
• 共享数据
• 兼容不同技术栈运行

缺点

• 多应用间，无多应用沙箱机制
• 多应用间，样式命名不慎会导致冲突
• js entry 导致子服务和基座强耦合

qiankun

乾坤是 @kuitos 大佬开发的，阿里出品。目前来说，是最完美的微前端解决方案，也是start最多的。 其代码写的很漂亮，建议大家去阅读，学习。

优点

• 基于single-SPA封装，开箱即用
• 技术无关，多技术栈可以共存
• html entry接入，解耦基座和子服务
• 样式隔离
• js沙箱机制
• 资源预加载
• 提供全局错误机制
• 提供跨服务通信机制
• 提供服务的生命周期
• 脱离基座，单个服务降级运行策略处理

缺点

• 共享运行时缓存支持
• 不兼容ie系列 （虽然大家都放弃ie/edge，但一些政府项目，有的需要支持ie9+）

四. 微前端设计理念

中心化路由-注册中心

注册中心：服务提供方要注册通告服务地址，服务的调用方要能发现目标服务。

这点和 后端的微服务类似。

我们需要在一个地方，统一维护路由和服务的对应关系。

服务生命周期

微前端的中心服务称为：基座。

基座需要控制服务的加载，卸载。这时候对于子服务而言，就涉及到 子服务的应用的生命周期。

按子服务加载到卸载的流程来看，需要包括以下：

• 子服务加载初始化
• 子服务渲染完成
• 子服务卸载完成
• 子服务更新事件

独立部署

大型应用拆分多个子应用后，每个子应用都是个单独的服务，可以独立生成docker镜像，独立接入CI / CD。

独立开发，独立运行

微前端待考虑一个重要事项：一个子服务运行有2种方式。

1. 本地开发时
2. 线上运行时

对于2，线上运行时，即接入微前端体系，由基座统一控制。

但对于1，本地开发，不一定接入基座调试，可能就是个 纯粹的 子服务。即微前端，需要考虑服务降级运行策略，脱离基座也是可以运行。

五. 微前端 vs 微服务

微前端的设计灵感来自于后端的微服务，但是他又不同于后端的微服务。

不同点

• 1. 微前端侧重服务聚合，而微服务侧重解耦
• 2. 微前端不存在跨容器服务调用，因为微前端运行环境是浏览器。而微服务存在许多跨容器服务调用，因此需要涉及restful, rpc调用。
• 3. 继2，微服务存在 服务发现，服务注册中心，服务注册心跳，以及动态扩容。而微前端，多应用通信，通过基座统一调度，而他们都处于同一个window环境。
• 4. 微前端存在多应用沙箱机制，以及样式隔离机制。而微服务不存在，它对外都是api http调用，不存在沙箱问题。
• 5. 微前端存在app entry问题，需要牺牲一些运行时来换得高效的更新维护成本。而微服务不存在app entry，统一对外提供api http调用。
• 6. 微前端的上层控制服务是基座，而微服务上层的控制服务是网关。虽然都是上层服务，但他们作用完全不一样。
• 7. 公共资源可以在微前端基座中运行时共享，而微服务做不到。比如：解决n个公共资源更新，各个子服务更新重新上线问题，对应微前端只需要更新一个地方，而微服务需要更新每个子服务。
• 8. 微前端需要解决体验问题，有预加载子服务技术，而微服务不需要。
• 9. 运行环境不同，微前端在浏览器中，微服务在服务器上。

相同点

• 1. 子服务支持：独立开发，独立运行，独立部署
• 2. 都有注册中心。（虽然他们注册中心实现机制完全不一样）
• 3. 一个应用可以使用多个技术栈实现，运行时聚合它

六. 微前端设计

@kuitos大佬别打我，逃~

下一篇，我将分享 微前端具体落地，以及底层实现。

码字不易，多多点赞关注 ~