【源码】微前端qiankun源码阅读(1)：Demo与single-spa流程

前言

老早就听说微前端了，觉得很高大上的样子。看了一些文章感觉一知半解，还是得自己搭建一下Demo，学习一下它到底是运作的。

微前端方案有很多，目前较为流行的方案的是自研框架。在自研方案中也有许多的框架，如Single-Spa， Qiankun。而qiankun也是基于single-spa开发的，现使用qiankun进行项目的搭建学习。

正文

（1）Demo搭建

为搭建一个Demo，首先准备几个不同技术栈搭建的子应用（vue2、vue3、react15、react16），以及一个主应用(main)：

image.png

这里的每个应用都可以独立运行。

准备好各个子应用后，开始引入qiankun， qiankun的使用很简单，按照官网 快速上手 文档就好。

首先在主应用的 main.js 中，注册微应用：

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


// 注册、加载、启动子应用
import { leftNav } from './store';
import { registerMicroApps, start } from 'qiankun';

registerMicroApps(leftNav.navList,
  // 主应用生命周期
  {
    beforeLoad: [
      () => {
        console.log('开始加载 -- ');
      },
    ],
    mounted: [
      () => {
        console.log('加载完成 -- ');
      },
    ],
    destoryed: [
      () => {
        console.log('卸载完成 -- ');
      },
    ],
  });
start();

createApp(App).use(router()).mount('#micro_web_main_app');

其中registerMicroApps传入的list为各个子应用的信息：

export const navList = [
  {
    name: 'react15',// 唯一
    entry: '//localhost:9002',
    loading,
    container: '#micro-container',
    activeRule: '/react15',
  },
  {
    name: 'react16',
    entry: '//localhost:9003',
    loading,
    container: '#micro-container',
    activeRule: '/react16',
  },
  {
    name: 'vue2',
    entry: '//localhost:9004',
    loading,
    container: '#micro-container',
    activeRule: '/vue2',
  },
  {
    name: 'vue3',
    entry: '//localhost:9005',
    loading,
    container: '#micro-container',
    activeRule: '/vue3',
  },
];

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

最后按照 微应用 文档改造一下子应用，并启动每个子应用，就可以在查看展示效果了。

image.png

image.png

可以看到，主应用提供了micro-container容器，然后根据当前的url加载到对应的子应用，而子应用的内容就是之前单页面应用时的id="app"。

（2）源码阅读：registerMicroApps、start

可以看到，我们就是引入了qiankun中的两个方法便成功运行了，下面看一下源码实现。

import { registerMicroApps, start } from 'qiankun';

这里阅读是版本是 qiankun v2.7.1。

在src/apis.ts可以看到，registerApplication, start两个关键的方法都是从single-spa中引入的，所以说qiankun也是基于single-spa开发的。

这里直接跳到single-spa，阅读版本是 single-spa v5.9.3。（注意：以下文件路径都是指在single-spa项目下的文件）
在src/applications/apps.js中，主要就是将传递进来的apps信息保存，并暴露各个操作apps的方法。

image.png

保存完后调用reroute，在 src/navigation/reroute.js 中查看reroute：

  if (isStarted()) {
    appChangeUnderway = true;
    appsThatChanged = appsToUnload.concat(
      appsToLoad,
      appsToUnmount,
      appsToMount
    );
    return performAppChanges();
  } else {
    appsThatChanged = appsToLoad;
    return loadApps();
  }

可以看到如果应用已经start，调用performAppChanges，否则调用loadApps。这里的start就前面提到的start。在src/start.js：

let started = false;

export function start(opts) {
  started = true;
  if (opts && opts.urlRerouteOnly) {
    setUrlRerouteOnly(opts.urlRerouteOnly);
  }
  if (isInBrowser) {
    reroute();
  }
}

export function isStarted() {
  return started;
}

performAppChanges：用于在路由切换时，调用toLoadPromise，加载对应的子应用。
loadApps做了两件重要的事情：1是路由劫持、2也是使用toLoadPromise加载子应用。

路由劫持在src/navigation/navigation-events.js中，可以看到文件中直接重写了pushState、replaceState。为什么要劫持路由变化？是为了在路由切换时加载对应的子路由。

  window.history.pushState = patchedUpdateState(
    window.history.pushState,
    "pushState"
  );
  window.history.replaceState = patchedUpdateState(
    window.history.replaceState,
    "replaceState"
  );

在 src/lifecycles/load.js 中查看toLoadPromise，可以看到toLoadPromise就是将已经加载好的app处理一下后返回。这里的app，就是子应用前面打包时output配置的library，运行打包文件(vendors/bundle)后输出的app module，以便在window[library]中访问到。

image.png

可以看到，single-spa要求我们自己提供并加载好app，那我们要如何运行打包文件获取到app呢？可以使用动态脚本加载方式。下面single-spa子应用配置的一个例子：

const createScript = (url) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    const first = document.getElementsByTagName('script')[0];
    first.parentNode.insertBefore(script, first);
  });
}

const loadApp = async (urls, name) => {
  await Promise.all(urls.map((url) => createScript(url)));
  return window[name];
}

export const navList = [
  {
    name: 'vue3',
    app: loadApp([ // loadApp需要自己实现，自己加载js。所以single-spa和qiankun相比，少了沙箱隔离等功能
      'http://localhost:9005/static/js/chunk-vendors.js',
      'http://localhost:9005/vue3.js'
    ], 'vue3'),
    activeWhen: (location) => location.pathname.startsWith('/vue3'), 
    customProps: {},
  },
];

总结

上面写得有点乱，但大概整体框架还是挺简单的。就是主应用提供一个容器，然后根据路由切换动态加载不同子应用的bundle，然后bundle会接管容器的内容展示，这里就和单页面应用几乎一样。

上面主要描述了single-spa的功能，但可以发现会有些问题：
1.single-spa需要开发者自己加载好app，然后传递给app配置。很麻烦。
2.各个子应用间没有隔离，比如在一个子应用中修改了window中的字段，切换到另一个子应用后，window没有复原，被污染了。

所以基于single-spa封装的qiankun进行了加强，对于上面两个问题做了处理：
1.可以看一开始qiankun的app配置，开发者只需提供entry字段，qiankun会自己去加载子应用的资源。
2.qiankun提供沙箱隔离，避免全局污染。
自此基本是讲的是single-spa，后面会继续介绍qiankun的上面两个功能的实现。

另外对于微前端框架的使用场景，由于我在项目中也没有使用过，不知道它可以带来哪些好处。比如各个子应用已经有自己的站点并独立运行，在主应用里直接链接跳转过去，和这种微前端加载相比，微前端的优势在哪里？这里看到一些理由是说：每当用户当切换系统时，链接跳转的方式导致页面都会刷新，体验很差。

参考

微前端-最容易看懂的微前端知识
微前端01 : 乾坤的Js隔离机制原理剖析（快照沙箱、两种代理沙箱）
每日优鲜供应链前端团队微前端改造