基于微前端qiankun的多页签缓存方案实践

相对于第一种方式，第二种方式将DOM格式存储在序列化的JS对象当中，只渲染需要展示的DOM元素，减少了DOM节点数，提升了渲染的性能，是当前主流的实现多页签的方式。

那么相对于传统的单页面应用，通过微前端qiankun进行改造后的前端应用，在多页签上实现会有什么不同呢？

改造前的单页面应用技术栈是Vue全家桶(vue2.6.10 + element2.15.1 + webpack4.0.0+vue-cli4.2.0)。

vue框架提供了keep-alive来支持缓存相关的需求，使用keep-alive即可实现多页签的基本功能，但是为了支持更多的功能，我们在其基础上重新封装了vue-keep-alive组件。

相对较于keep-alive通过include、exclude对缓存进行控制，vue-keep-alive使用更原生的发布订阅方式来删除缓存，可以实现更完整的多页签功能，例如同个路由可以根据参数的不同派生出多个路由实例（如打开多个详情页页签）以及动态删除缓存实例等功能。

下面是vue-keep-alive自定义的拓展实现：

created() {
  // 动态删除缓存实例监听
  this.cache = Object.create(null);
  breadCompBus.$on('removeTabByKey', this.removeCacheByKey);
  breadCompBus.$on('removeTabByKeys', (data) => {
    data.forEach((item) => {
      this.removeCacheByKey(item);
    });
  });
}

// 传入`vue-keep-alive`的自定义方法
function updateComponentsKey(key, name, vnode) {
  const match = this.$route.matched[1];


  if (match && match.meta.multiNodeKey) {
    vnode.key = match.meta.multiNodeKey(key, this.$route);
    return vnode.key;
  }


  return key;
}

qiankun是由蚂蚁金服推出的基于Single-Spa实现的前端微服务框架，本质上还是路由分发式的服务框架，不同于原本 Single-Spa采用JS Entry用的方案，qiankun采用HTML Entry 方式进行了替代优化。

使用qiankun进行微前端改造后，页面被拆分为一个基座应用和多个子应用，每个子应用都运行在独立的沙箱环境中。

相对于单页面应用中通过keep-alive管控组件实例的方式，拆分后的各个子应用的keep-alive并不能管控到其他子应用的实例，我们需要缓存对所有的应用生效，那么只能将缓存放到基座应用中。

这个就存在几个问题：

<template>
  <div id="app">
  <header>
    <router-link to="/app-vue-hash/">app-vue-hash</router-link>
    <router-link to="/app-vue-history/">app-vue-history</router-link>
    <router-link to="/about">about</router-link>
  </header>
  <div id="appContainer1" v-show="$route.path.startsWith('/app-vue-hash/')"></div>
  <div id="appContainer2" v-show="$route.path.startsWith('/app-vue-history/')"></div>
  <router-view></router-view>
</div>
</template>


<script>
import { loadMicroApp } from 'qiankun';


const apps = [
{
  name: 'app-vue-hash',
  entry: 'http://localhost:1111',
  container: '#appContainer1',
  props: { data : { store, router } }
},
{
  name: 'app-vue-history',
  entry: 'http://localhost:2222',
  container: '#appContainer2',
  props: { data : store }
}
]


export default {
  mounted() {
    // 优先加载当前的子项目
    const path = this.$route.path;
    const currentAppIndex = apps.findIndex(item => path.includes(item.name));
    if(currentAppIndex !== -1){
      const currApp = apps.splice(currentAppIndex, 1)[0];
      apps.unshift(currApp);
    }
    // loadMicroApp 返回值是 app 的生命周期函数数组
    const loadApps = apps.map(item => loadMicroApp(item))
    // 当 tab 页关闭时，调用 loadApps 中 app 的 unmount 函数即可
  },
}
</script>

// keep-alive核心代码
render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot)
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  if (componentOptions) {
    // 更多代码...
    // 缓存命中
    if (cache[key]) {
      vnode.componentInstance = cache[key].componentInstance
      // make current key freshest
      remove(keys, key)
      keys.push(key)
    } else {
      // delay setting the cache until update
      this.vnodeToCache = vnode
      this.keyToCache = key
    }
    // 设置keep-alive，防止再次触发created等生命周期
    vnode.data.keepAlive = true
  }
  return vnode || (slot && slot[0])
}
// mounted和updated时缓存当前组件的vnode
mounted() {
  this.cacheVNode()
}
updated() {
  this.cacheVNode()
}

// 父应用提供unmountCache方法
function unmountCache() {
  // 此处永远只会保存首次加载生成的实例
  const needCached = this.instance?.cachedInstance || this.instance;
  const cachedInstance = {};
  cachedInstance._vnode = needCached._vnode;
  // keepalive设置为必须 防止进入时再次created，同keep-alive实现
  if (!cachedInstance._vnode.data.keepAlive) cachedInstance._vnode.data.keepAlive = true;
  // 省略其他代码...


  // loadedApplicationMap用于是key-value形式，用于保存当前应用的实例
  loadedApplicationMap[this.cacheKey] = cachedInstance;
  // 省略其他代码...


  // 卸载实例
  this.instance.$destroy();
  // 设置为null后可进行垃圾回收
  this.instance = null;
}


// 子应用在qiankun框架提供的卸载方法中，调用unmountCache
export async function unmount() {
  console.log('[vue] system app unmount');
  mainService.unmountCache();
}

// 创建子应用实例，有缓存的vnode则使用缓存的vnode
function newVueInstance(cachedNode) {
  const config = {
    router: this.router,
    store: this.store,
    render: cachedNode ? () => cachedNode : instance.render, // 优先使用缓存vnode
  });
  return new Vue(config);
}


// 实例化子应用实例，根据是否有缓存vnode确定是否传入cachedNode
this.instance = newVueInstance(cachedNode);
this.instance.$mount('#app');

首先我们回答一下第一个问题，为什么在切换子应用时，要卸载掉原来的子应用实例，有两个考虑方面：

• 其一，是对内存的考量，我们需要的其实仅仅是vnode，而不是整个实例，缓存整个实例是方案一的实现方案，所以，我们仅需要缓存我们需要的对象即可；

• 其二，卸载子应用实例可以移除不必要的事件监听，比如vue-router对popstate事件就进行了监听，我们在其他子应用操作时，并不希望原来的子应用也对这些事件进行响应，那么在子应用卸载时，就可以移除掉这些监听。

对于第二个问题，情况会更加复杂一点，下面一个部分，就主要来看下主要遇到了哪些问题，又该如何去解决。

首先我们需要明确这两个问题的原因：

• 第一个是因为在子应用卸载时移除了对popstate事件的监听，那么我们需要做的就是重新注册对popstate事件的监听，这里可以通过重新实例化一个vue-router解决；

• 第二问题是因为通过重新实例化vue-router解决第一个问题之后，实际上是一个新的vue-router，我们需要做的就是不仅要缓存vnode，还需要缓存router相关的信息。

大致的解决实现如下：

// 实例化子应用vue-router
function initRouter() {
  const { router: originRouter } = this.baseConfig;
  const config = Object.assign(originRouter, {
    base: `app-kafka/`,
  });
  Vue.use(VueRouter);
  this.router = new VueRouter(config);
}


// 创建子应用实例，有缓存的vnode则使用缓存的vnode
function newVueInstance(cachedNode) {
  const config = {
    router: this.router, // 在vue init过程中，会重新调用vue-router的init方法，重新启动对popstate事件监听
    store: this.store,
    render: cachedNode ? () => cachedNode : instance.render, // 优先使用缓存vnode
  });
  return new Vue(config);
}


function render() {
  if（isCache） {
    // 场景一、重新进入应用（有缓存）
    const cachedInstance = loadedApplicationMap[this.cacheKey];


    // router使用缓存命中
    this.router = cachedInstance.$router;
    // 让当前路由在最初的Vue实例上可用
    this.router.apps = cachedInstance.catchRoute.apps;
    // 使用缓存vnode重新实例化子应用
    const cachedNode = cachedInstance._vnode;
    this.instance = this.newVueInstance(cachedNode);
  } else {
    // 场景二、首次加载子应用/重新进入应用（无缓存）
    this.initRouter();
    // 正常实例化
    this.instance = this.newVueInstance();
  }
}


function unmountCache() {
  // 省略其他代码...
  cachedInstance.$router = this.instance.$router;
  cachedInstance.$router.app = null;
  // 省略其他代码...
}

3.3.2父子组件通信

多页签的方式增加了父子组件通信的频率，qiankun有提供setGlobalState通信方式，但是在单应用模式下，同一时间仅支持和一个子应用进行通行，对于unmount 的子应用来说，无法接收到父应用的通信，因此，对于不同的场景，我们需要更加灵活的通信方式。

子应用——父应用：使用qiankun自带通信方式；

// 自定义事件发布
const evt = new CustomEvent('microServiceEvent', {
  detail: {
    action: { name: action, data },
    basePath, // 用于子应用唯一标识
  },
});
document.dispatchEvent(evt);


// 自定义事件监听
document.addEventListener('microServiceEvent', this.listener);

应用级缓存

最后，我们从整体的视角来了解下多页签缓存的实现方案。

因为不仅仅需要对子应用的缓存进行管理，还需要将vue-keep-alive组件注册到各个子应用中等事项，我们将这些服务统一在主应用的mainService中进行管理，在registerMicroApps注册子应用时通过props传入子应用，这样就能够实现同一套代码，多处复用。

// 子应用main.js
let mainService = null;


export async function mount(props) {
  mainService = null;
  const { MainService } = props;
  // 注册主应用服务
  mainService = new MainService({
  // 传入对应参数
  });
  // 实例化vue并渲染
  mainService.render(props);
}
export async function unmount() {
  mainService.unmountCache();
}

相较于社区上大部分通过方案一进行实现，本文提供了另一种实现多页签缓存的一种思路，主要是对子应用缓存处理上有些许的不同，大致的思路及通信的方式都是互通的。

另外本文对qiankun框架的使用没有做太多的发散总结，官网和Github上已经有很多相关问题的总结和踩坑经验可供参考。

最后，如果文章有什么问题或错误，欢迎指出，谢谢。