微前端

微前端

February 15, 2023
frontend

概念 #

微前端是一个架构理念

适用场景 #

  • 把一个大系统，拆成若干小的子系统，分开去迭代维护
  • 把若干分散的子系统(不同或同一技术栈）合在一起，避免过多的跳转

实现方案 #

iframe #

优点：先天隔离，成本最低

缺点：性能低、通信复杂、双滚动条、弹窗问题(无法全局覆盖?)

npm 包 #

子应用拆成 npm 包

优点：性能和兼容性上是最优的方案

缺点：版本管理，包更新后，包的使用方是否需要同步更新？

single-spa #

渲染原理：路由监听, 监听 url change 事件

出现最早、最有影响力的微前端框架

qiankun #

阿里出的

在 single-spa 基础上进行了封装，提供了js沙箱、样式隔离、预加载等功能，并且与技术栈无关，可以兼容不同的框架

渲染原理：路由监听, 监听 url change 事件

html 作为资源入口，通过加载远程 html，解析其DOM结构从而获取js、css等静态资源来实现微前端的渲染，这也是qiankun目前采用的渲染方案。

缺点： 接入成本高

主子应用通信：

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 主应用初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

// 子应用从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });

  props.setGlobalState(state);
}

micro app #

原理： CustomElement, 类 WebComponent + HTML Entry

Module Federation #

样式隔离 #

目的：主应用和子应用的样式互不影响

  • 框架层处理缺点： 只能保证子应用的

  • 用 cssModule 之类的工具或团队之间协商好样式前缀，从源头解决问题

Calendar April 21, 2024