微前端浅析

一、微前端含义

Techniques, strategies and recipes for building a modern web app with multipleteams that can ship features independently. -- Micro Frontends

微前端是一种多个团队（技术栈无关）通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略

微前端的两种形态：

• 单实例：即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。通常基于 url 的变化来做子应用的切换。
• 多实例：同一时刻可展示多个子应用。通常使用 Web Components 方案来做子应用封装，子应用更像是一个业务组件而不是应用。

适合微前端的场景：

• 大型单体应用场景（巨石应用）
• 工作台场景

二、微前端架构（以qiankun为例）

主框架充当调度者的角色，在不同的条件下激活不同的子应用；由此得出主框架的作用：导航路由 + 资源加载

1、路由系统

举例：在一个微前端系统中， 主域名： https://domain.com/ 两个子应用域名：htpps://domain.com/sub1, htpps://domain.com/sub2

访问页面: https://domain.com/ =》访问子应用htpps://domain.com/sub1 =》 访问子应用htpps://domain.com/sub1/detail

此时手动刷新浏览器，

• 由于子应用都是 lazy load 的，会重新加载主框架的资源，同时异步 load 子应用的静态资源
• 主应用的路由系统已经激活，但子应用的资源可能还没有完全加载完毕
• 路由注册表里发现没有能匹配子应用 的规则，这时候就会导致跳 NotFound 页或者直接路由报错。

解决方法：

• 主框架配置子应用的路由为 sub1: { url: '/sub1/**', entry: './sub1.js' }
• 浏览器的地址为 /sub1/xxx 时，框架需要先加载 entry 资源，加载完毕确保子应用的路由系统注册进主框架之后
• 由子应用的路由系统接管 url change 事件。同时在子应用路由切出时=》主框架需要触发相应的 destroy 事件=》子应用在监听到该事件时，卸载应用

2、CSS隔离

主应用-子引用之间的样式冲突

子应用之间的样式冲突（Dynamic Stylesheet）（严格样式隔离：使用shadow dom）

在应用切出/卸载后，同时卸载掉其样式表（如果是HTML Entry方案具备样式隔离的特性，因为应用卸载后会直接移除去 HTML 结构，从而自动移除了其样式表。）

3、JS隔离

快照沙箱：

• 在应用的 bootstrap 及 mount 两个生命周期开始之前分别给全局状态打下快照
• 当应用切出/卸载时，将状态回滚至 bootstrap 开始之前的阶段，确保应用对全局状态的污染全部清零。
• 当应用二次进入时则再恢复至 mount 前的状态的，从而确保应用在 remount 时拥有跟第一次 mount 时一致的全局上下文

4、通信

基于URL	完全解耦，应用之间独立	传递信息能力弱，场景限制
基于CustomEvent	弱耦合，浏览器原生支持	全局命名冲突，缺乏管控； 复杂情况下通信零碎，散乱
基于props	通信能力完全自定义	主应用子应用耦合较强

三、开源项目

icestark： 主应用 | icestark

qiankun： 介绍 - qiankun

sing-spa：快速开始

参考资料：

可能是你见过最完善的微前端解决方案 - 知乎