项目背景与挑战
在当前快速发展的互联网行业中，高效地满足用户需求是每个开发团队的核心目标之一。在我们最新的项目中，多页签功能成为了不可或缺的一部分。这一需求的提出，主要是基于用户体验的考虑——允许用户在同一窗口内同时操作多个任务或查看不同信息，极大地提高了工作效率。然而，在实现这一功能的过程中，我们遇到了一系列的技术挑战。
最初，我们的技术架构是基于 qiankun 的微前端解决方案构建的。qiankun 是一个非常强大的微前端框架，它使得多个独立开发的前端应用能够以一种无缝的方式集成到一起，形成一个统一的用户体验。这种架构设计对于促进团队之间的协作以及加快产品迭代速度有着显著的好处。
在遇到多页签需求之后，为了更好地满足项目需求，我们决定将多页签相关的代码迁移至一个独立的应用中。在这个独立的应用中，我们采用了 tabs 组件来替代传统的 React Router 进行页面显示的相关处理。这种方式不仅简化了路由管理，还使得页面之间的切换更加平滑自然，为实现多页签功能打下了良好的基础。
然而，即便如此，由于项目的复杂性和多样性，即项目中包含了多个功能模块，每个模块服务于不同的业务场景和用户群体，这导致了不同业务模块对系统稳定性及新功能的需求存在较大差异。例如，业务A可能迫切需要新增某些特性来吸引用户，而业务B则更加关注系统的稳定性和安全性。在这种情况下，如果所有代码都被打包在一起，并且没有实施有效的版本管理策略，那么即使是一个小的功能更新也可能引发整体系统的不稳定，进而影响到其他用户的使用体验。
此外，尽管我们已经对qiankun和wujie这两种流行的微前端方案有了深入的理解，它们都提供了多实例的支持，但在处理子应用中页面在多个标签页中保持活跃状态的问题上，似乎并没有提供特别优雅的解决方案。这意味着我们需要寻找新的方法来确保当用户在不同的标签页之间切换时，各个子应用的状态能够得到妥善保存。
解决方案概述
针对上述挑战，我们设计了一套综合性的解决方案，旨在通过优化现有架构来更好地支持多页签功能，具体包括以下几个方面：
- 主应用中的Tabs管理：首先，在主应用层面建立一个全局的tabs列表，该列表将动态跟踪用户当前打开的所有标签页。每当路由发生改变时，根据当前访问的功能模块规则，自动调整tabs列表的内容，如添加新的标签页、更新现有标签页的信息或移除不再需要的标签页。
- 动态加载与卸载子应用：随着tabs列表的变化，主应用需要智能地判断哪些子应用需要被加载（mount）或卸载（unmount）。这一步骤不仅是为了提高系统的响应速度和减少资源消耗，更重要的是为了实现子应用的保活机制。通过动态加载与卸载，我们可以确保只有当前激活的子应用处于活动状态，而其他子应用则可以被卸载以释放内存。当用户切换标签页时，之前卸载的子应用可以快速恢复其状态，确保用户之前的交互数据和操作得以保留，提供流畅的用户体验。
- 利用Tabs组件实现子应用间导航：在主应用内部，我们采用Tabs组件作为子应用间的导航工具。通过解析路由信息，我们可以准确地确定哪个子应用应当处于激活状态，并将其展示给用户。 子应用内部的Tabs逻辑：每个子应用也需要具备一定的路由管理能力，即能够从主应用传递过来的tabs列表中筛选出属于自己的部分，并据此构建自身的导航结构。此外，子应用还需根据当前激活的路由信息来决定显示哪一个具体的页面。
- 路由与渲染分离：最后，无论是主应用还是子应用，我们都将路由管理和实际页面渲染进行了分离。这样做的好处在于，可以更加灵活地控制页面的加载过程，同时也为未来的扩展留下了空间。
