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

发布网友发布时间：2024-10-24 12:14

共1个回答

热心网友时间：2024-10-30 23:33

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

本文介绍了如何利用阿里开源的微前端框架qiankun实现多页签和子应用的缓存优化，对比了不同方案的优缺点，为使用微前端开发多页签功能的开发者提供实用参考。

多页签缓存方案概述

微前端的qiankun框架通过拆分应用为基座和子应用，每个子应用在沙箱中运行，这在多页签管理上带来了不同。传统单页应用的keep-alive机制在微前端中不再适用，因为子应用间的缓存管理需要基座应用统一协调。

两种实现思路比较

方案一：子应用切换显示，通过loadMicroApp手动控制，存在DOM渲染复杂性问题。
方案二：同一时间只加载一个子应用，通过缓存子应用实例的vnode，避免了频繁渲染，但通信方式需更灵活。

具体实现与优化

我们选择了方案二，通过应用级缓存子应用实例的vnode，解决vue-router通信和内存管理问题，采用自定义事件处理父子组件通信，确保缓存的高效管理。

框架架构

将缓存管理、vue-keep-alive注册等服务集成在主应用的mainService中，实现跨子应用复用，简化开发流程。

局限性

目前仅支持vue框架的实例缓存，对于react应用的支持还需进一步探索。

总结

本文提供的多页签缓存方案与社区常见方案有所不同，主要侧重于子应用缓存的处理，其他核心逻辑则保持一致。qiankun的官方文档和GitHub资源是深入学习和实践的好去处。

如需讨论或指正错误，欢迎提出，感谢关注。