QianKun 2.0 微前端源码解析

此篇文章只简单梳理思路，不会源码逐行分析，看此文章前请熟悉qiankun和single-spa的使用最好

暴露出的API, 从index.ts文件可以看出下面暴露的API

export { loadMicroApp, registerMicroApps, start } from './apis';
export { initGlobalState } from './globalState';
export * from './errorHandler';
export * from './effects';
export * from './interfaces';
export { prefetchApps } from './prefetch';

1. 注册子应用 registerMicroApps

注册子应用的接口， 基本原理是内部有一个子应用数组，可以注册多个子应用，遍历数组调用single-spa的registerApplication函数进行注册, 此API用法如下, 可以参考 https://single-spa.js.org/docs/api

registerApplication

注意此函数的第二个参数applicationOrLoadingFn,返回一个resolved的应用或者一个promise，注意这里的 the resolved application其实是single-spa定义的一个概念，一个应用的概念，具体参考https://single-spa.js.org/docs/building-applications
说白了就是要返回一个如下的对象，带有名字，声明周期方法, 这就是qiankun要求你子应用必须声明这些声明周期函数的目的，返回给single-spa

{
  name: "applicationName",
  bootstrap: [ bootstrap function array],
  mount: [ mount function array],
  unmount: [ unmount function array]
}

registerMicroApps里面关键的代码如下，注意这个loadApp才是真正封装的返回应用的地方

  unregisteredApps.forEach(app => {
    const { name, activeRule, props, ...appConfig } = app;

    registerApplication({
      name,
      app: async () => {
        await frameworkStartedDefer.promise;
        return loadApp({ name, props, ...appConfig }, frameworkConfiguration, lifeCycles);
      },
      activeWhen: activeRule,
      customProps: props,
    });
  });

加载子应用内部函数 loadApp

下面着重看下这个加载子应用函数，分几个小步骤看下

1. 加载入口文件 importEntry： 加载指定的html文本，和脚本用来执行，这就是你在qiankun中传入entry: '//localhost:7100'类似参数的用途，用此路劲来加载你子应用的入口文件,和手动执行html中的脚本
2. 创建子应用DOM render: 如果你注册的时候加入了render方法，此处会调用执行，否则找到container元素，把渲染的内容插入节点中
3. 创建沙箱 sandbox： 此处是qiankun的核心，创建了js的沙箱进行子应用之间和主应用的隔离, 此处不展开分析，原理就是window对象的属性劫持，内部用一个对象缓存子应用window下面属性方法，达到隔离的目的，下面代码可以看出，支持proxy的就用proxy代理的沙箱隔离，否则用SnapshotSandbox，简单来说就是内部备份，diff 方式记录， SingularProxySandbox是老沙箱方式实现，说是稳定了再用统一的ProxySandbox

  if (window.Proxy) {
    sandbox = singular ? new LegacySandbox(appName) : new ProxySandbox(appName);
  } else {
    sandbox = new SnapshotSandbox(appName);
  }

4. 执行加载前事件 beforeLoad： 利用execHooksChain函数归并执行函数，简单来说就是类似redux中的compose洋葱模型，上一次函数的返回值作为下一个函数的参数，包裹执行，也是中间件原理，后面的一些加载声明周期函数与此类似
5. 执行入口文件的脚本 execScripts： 此步骤就是获取子应用指定的主脚本，执行并且获取子应用的bootstrap,mount, unmount等声明周期函数
6. 返回应用并执行内部的一些钩子周期函数： 此时就可以返回一个满足single-spa的应用了，同时在mount和unmount之前会执行一些内部定义的生命周期钩子

到此为止，基本整个注册，加载流程清楚了

2. 动态加载应用 loadMicroApp

qiankun提供了动态加载子应用的方式，简单代码如下, 动态调用了single-spa的mountRootParcel方法和qiankun内部loadApp来实现应用加载

export function loadMicroApp(
  app: LoadableApp,
  configuration = frameworkConfiguration,
): MicroApp {
  const { props, ...appConfig } = app;
  return mountRootParcel(() => loadApp(appConfig, configuration), {
    domElement: document.createElement('div'),
    ...props,
  });
}

3. 启动应用 start

start的代码也没有几行，如下主要就是调用single-spa内部的start来启动应用，对应的为startSingleSpa此函数

export function start(opts: FrameworkConfiguration = {}) {
  frameworkConfiguration = opts;
  const {
    prefetch = true,
    sandbox = true,
    singular = true,
    urlRerouteOnly,
    ...importEntryOpts
  } = frameworkConfiguration;

  if (prefetch) {
    prefetchApps(microApps, prefetch, importEntryOpts);
  }

  if (sandbox) {
    if (!window.Proxy) {
      console.warn('[qiankun] Miss window.Proxy, proxySandbox will degenerate into snapshotSandbox');
      // 快照沙箱不支持非 singular 模式
      if (!singular) {
        console.error('[qiankun] singular is forced to be true when sandbox enable but proxySandbox unavailable');
        frameworkConfiguration.singular = true;
      }
    }
  }

  startSingleSpa({ urlRerouteOnly });

  frameworkStartedDefer.resolve();
}