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

原创

于 2022-08-02 08:30:00 发布 · 5.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #qiankun #微前端

本文介绍了基于阿里开源的微前端框架qiankun，实现多页签及子应用缓存的两种方案。方案一通过CSS控制显示隐藏，方案二利用缓存vnode重新渲染，避免DOM重复。文章详细对比了两者的优缺点，并针对方案二阐述了关键实现步骤，包括应用级缓存管理和通信机制。最终，作者选择了方案二，以减少DOM节点数和内存占用。文章还讨论了现有问题，如仅支持Vue框架，并总结了实现多页签缓存的思路。

作者：vivo 互联网前端团队- Tang Xiao

本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。

一、多页签是什么？

我们常见的浏览器多页签、编辑器多页签，从产品角度来说，就是为了能够实现用户访问可记录，快速定位工作区等作用；那对于单页应用，可以通过实现多页签，对用户的访问记录进行缓存，从而提供更好的用户体验。

前端可以通过多种方式实现多页签，常见的方案有两种：

通过CSS样式display:none来控制页面的显示隐藏模块的内容；
将模块序列化缓存，通过缓存的内容进行渲染（与vue的keep-alive原理类似，在单页面应用中应用广泛）。

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

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

1.1 单页面应用实现多页签

改造前的单页面应用技术栈是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组件即可传入自定义方法，用于自定义vnode.key，支持同一匹配路由中派生多个实例。

// 传入`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;
}