微前端技术点探秘

前言

微前端目前有几个可选用的框架：

single-spa

劫持路由匹配子应用
子应用需要配置 bootstrap、mount、unmount 接入主引用
需要修改子应用代码
Why Not Iframe

qiankun

基于 single-spa
增强沙箱能力

garfish

micro-app

通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件
子应用需要支持跨域访问，需要配置 BaseRoute

icestarck

wujie

iframe 天然的 JavaScript 沙箱机制完美隔离
劫持 iframe 的 history.pushState 和 history.replaceState 与主应用 url 同步，以解决 iframe 刷新丢失 url 状态的问题
WebComponents 实现样式隔离
通过 window.parent，EventBus，或 props 注入实现通信

EMP

Module Federation

本文将借助现有的文章及源码对微前端的特性技术点做技术总结。

技术点

异步加载多个应用

实现方式：

通过劫持路由实现对路由的控制，从而控制子应用展示

该方法由 single-spa 提出，qiankun 和 garfish 都参考了该实现。在主应用配置子应用配置，将主应用的某个路由如 /user 配置指向 https://user.example.com。当激活路由时，通过 fetch 地址获取目标地址的 HTML 进行解析。

通过 WebComponent 将子应用视为一个组件

沙箱隔离

将 window 通过 Proxy 包装生成新的 ProxyWindow 提供给子应用，激活应用时将 global 指向新的 ProxyWindow

通过使用 shadow DOM 提供沙箱能力

样式隔离

通过 Shadow DOM 提供隔离能力

各项目编译产物 class 增加前缀 prefix，或者是 CSSModule 方案

父子通信机制

通过 window 设置全局变量

通过 window 实现发布订阅模式

通过 iframe 的 window.frames 和 window.parent 获取父子应用实例进行通信

借助 CustomEvent() 实现自定义事件

Newer note

Web Animation 网页动画

网页动画简史及现代网页动画技术简介

微前端技术点探秘

前言

技术点

异步加载多个应用

沙箱隔离

样式隔离

父子通信机制

Move to the next note without dropping back into a generic post footer.

Web Animation 网页动画

Induction: Rust

前言

技术点

异步加载多个应用

沙箱隔离

样式隔离

父子通信机制