qiankun 源码详解：深入微前端原理

前端

2023-10-29 14:47:58

在微前端领域，qiankun 无疑是备受瞩目的一颗新星。它以灵活高效、简单易用的特性，为开发者提供了构建复杂应用的利器。本文将带你深入 qiankun 的源码，揭开它的底层运作机制，带你领略微前端世界的奥秘。

qiankun 的工作原理

qiankun 的核心思想是基于 single-spa 框架，它将一个庞大的单体应用拆分为多个独立的子应用，并通过路由机制进行管理。当访问一个特定的路由时，qiankun 会动态加载相应的子应用并将其挂载到指定的 DOM 节点上。

核心模块

qiankun 主要由以下几个核心模块构成：

Lifecycles： 管理子应用的生命周期，包括加载、启动、渲染和卸载等阶段。
Routes： 定义子应用与路由的映射关系，当访问特定路由时加载相应的子应用。
Store： 提供跨子应用的数据共享机制，允许子应用访问和修改共享数据。
Plugin： 扩展 qiankun 功能的插件机制，可以自定义路由、生命周期钩子等功能。

深入源码

Lifecycles

Lifecycles 模块负责管理子应用的生命周期。它提供了以下几个关键方法：

// 加载子应用
loadApp(appName);
// 启动子应用
startApp(appName);
// 渲染子应用
mountApp(appName, element);
// 卸载子应用
unmountApp(appName);

Routes

Routes 模块负责定义子应用与路由的映射关系。它使用了一种类似于 Vue Router 的配置方式，如下所示：

export default {
  // 子应用名称
  name: 'app1',
  // 匹配的路由
  activeWhen: '/app1',
  // 渲染方法
  render(props) {
    // 渲染子应用
  }
};

Store

Store 模块提供了一个跨子应用的数据共享机制。它使用 Vuex 作为数据存储，并提供了以下几个关键方法：

// 获取共享数据
getState();
// 提交共享数据修改
commit(mutationType, payload);

插件机制

qiankun 提供了一个插件机制，允许开发者自定义扩展 qiankun 的功能。插件可以实现以下几个钩子函数：

onAppLoad：在子应用加载时触发
onAppStart：在子应用启动时触发
onAppMounted：在子应用挂载到 DOM 时触发
onAppUnmounted：在子应用卸载时触发

实践案例

1. 使用 qiankun 创建一个子应用

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// qiankun 启动钩子
export async function bootstrap(props) {
  // 挂载子应用
  app.mount(props.container);
}

// qiankun 卸载钩子
export async function unmount() {
  // 卸载子应用
  app.unmount();
}

2. 在 qiankun 主应用中使用子应用

import { registerMicroApps } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8080/app1',
    container: '#app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8080/app2',
    container: '#app2',
  },
]);

// 启动 qiankun
qiankun.start();