三大微前端框架

蚂小蚁
976 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

前言

前面介绍了我们的微前端需要解决的基础问题，接下来我们介绍一下微前端用的比较多的一些框架：single-spa、qiankun、飞冰

single-spa

single-spa是一款与框架无关的微前端解决方案

生命周期

registerApplication => load applications => bootstrapped => mounted => unmounted => unloaded

其中bootstrap、mount、unmount必须由我们导出，否则会报错

registerApplication

首先注册微应用：registerApplication

registerApplication(
  'app1',
  () => import('src/app1/main.js'),
  (location) => location.pathname.startsWith('/app1'),
  { some: 'value' }
);

注意：这里的入口文件只能是js，像Vue和React都有入口文件main.js，刚好可以进行微应用注册

bootstrap

bootstrap只会被执行一次，执行时机是第一次挂载应用

export async function bootstrap(props) {...}

mount

这个阶段将会创建DOM节点，监听DOM事件，激活路由

export async function mount(props) {...}

unmount

卸载事件

export async function unmount(props) {...}

微前端本身是一个多页面多项目应用，多页面应用的缺点在于切换很慢，资源重复加载；而single-spa首次将多页应用以单页方式进行切换，优化了用户体验，也启发了后来的框架

qiankun

qiankun以single-spa为基础，主要增加了以下功能：

  1. 实现了js沙箱以及微应用和主应用的样式隔离，样式的隔离还可以选择严格模式即shadow DOM，天然的样式隔离
  2. 增加了html入口文件的解析
registerMicroApps([
  {
    name:'sub-vue',
    entry:'//localhost:8080',
    container:"#app1",
    activeRule:'/vue',
  },
  {
    name:'sub-vue2',
    entry:'//localhost:8081',
    container:"#app2",
    activeRule:'/vue2'
  }
])
  1. 提供了通信方案：onGlobalStateChange实现主应用与微应用、微应用之间的通信 主应用初始化全局状态同时监听statechange：
import { initGlobalState, MicroAppStateActions } from 'qiankun';

const actions= initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  console.log(state, prev);
});

此时微应用同样也可以监听statechange和设置state，但必须在mount中设置：

export async function mount(props) {
    props.onGlobalStateChange((state,prev)=>{})
    props.setGlobalState({init:1})
}

使用qiankun的时候需要注意必须创建一个public-path.js文件，否则所有的静态资源都不能正常获取到

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

但是qiankun依然有没有解决的问题

  1. 如果不是用严格沙盒模式，主应用与子应用定义全局样式时会产生样式污染
  2. 版本管理、应用部署、公共依赖这几块没有提出很好的解决方案，需要我们自己去实现，一般公共依赖我们可以在主应用维护，然后进行打包发布

飞冰

基于 React 的研发解决方案 与上面的不同，飞冰是限定框架的

飞冰微前端解决方案：icestark

飞冰如何接入？

  1. 安装依赖：build-plugin-icestark，然后添加配置项

  2. 主应用入口改造,定义路由，引入微应用的js地址（umd包），css地址

  3. 子应用改造，子应用需要打umd包，以便于主应用去引入

总结

本文简要介绍了三大微前端框架的使用，这三个微前端框架是目前的主流框架，当然还有一些使用web-components实现的微前端框架，但是那一类目前还不成熟，如果感兴趣的可以自己去研究一下；

avatar
文章
阅读
粉丝