全方位解析 QianKun 微前端运行过程

2023-10-07 14:55:28

QianKun 简介

QianKun 是蚂蚁集团开源的一款微前端框架，致力于构建高效、稳定、易用的微前端应用。QianKun 的核心思想是将应用拆分为多个独立的子应用，并通过沙箱隔离的方式将子应用集成到主应用中。这样可以实现子应用的独立开发、独立部署和独立运行，同时又可以共享主应用的资源，从而提高开发效率和降低维护成本。

QianKun 运行过程解析

1. 子应用注册

在主应用中使用 QianKun 注册子应用，这是 QianKun 运行的第一步。注册子应用需要提供子应用的名称、入口文件路径、基准路径和沙箱隔离策略等信息。

// 主应用注册子应用
QianKun.register({
  name: 'sub-app',
  entry: '//localhost:8080/sub-app/index.js',
  base: '/sub-app',
  sandbox: {
    strictStyleIsolation: true,
    strictScriptIsolation: true,
  },
});

2. 沙箱创建

在子应用加载之前，QianKun 会创建一个沙箱来隔离子应用的运行环境。沙箱可以防止子应用访问主应用的全局变量、DOM 元素和网络请求，从而保证子应用的独立性和安全性。

QianKun 提供了多种沙箱隔离策略，包括 strict-csp、strict-sandbox 和 proxy-polyfill。开发者可以根据自己的需求选择合适的沙箱隔离策略。

3. 路由监听

在沙箱创建完成后，QianKun 会开始监听路由变化。当检测到与子应用匹配的路由时，QianKun 会加载子应用的入口文件。

// 子应用路由监听
QianKun.watchRoutes([
  {
    path: '/sub-app/*',
    exact: true,
  },
]);

4. 生命周期管理

子应用加载完成后，QianKun 会调用子应用的生命周期钩子函数，包括 mount、unmount 和 update。这些生命周期钩子函数可以帮助子应用完成初始化、卸载和更新等操作。

// 子应用生命周期钩子函数
export function mount() {
  // 子应用初始化操作
}

export function unmount() {
  // 子应用卸载操作
}

export function update(prevProps) {
  // 子应用更新操作
}

5. 事件通信

QianKun 提供了事件通信机制，允许主应用和子应用之间进行通信。主应用可以通过 postMessage 方法向子应用发送消息，子应用可以通过 addEventListener 方法监听来自主应用的消息。

// 主应用向子应用发送消息
window.postMessage({
  type: 'message-from-main',
  data: 'Hello from main app!',
}, '*');

// 子应用监听来自主应用的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'message-from-main') {
    console.log(`Received message from main app: ${event.data.data}`);
  }
});