本文已参与「新人创作礼」活动,一起开启掘金创作之路。
1、 前言
上一篇简单了解了微前端以及使用较广泛的微前端库qiankun,接下来咱们一起深入去了解下qiankun。
2、 微前端库-qiankun
qiankun 是一个基于 single-spa 再次封装的微前端库,让用户在架构微前端更容易、更便捷。
qiankun 的核心价值就是技术栈无关。 举个例子:
公司需要做一个统一控制台,把之前的三个项目(项目A、B、C)给接入,
而项目A(Vue3)是一个月前新建的在迭代中,
项目B(Vue2)是一年前做的基本没咋维护了,
项目C(HTML、jQuery)是三五年前的老项目。
正常情况下就需要把项目C进行改造,项目B进行升级,这样控制台才相对容易维护些。
但这样做是非常的费时费力的,所有核心价值 技术栈无关就尤为重要。
qiankun 的核心贡献者 - 方涣 曾提到过qiankun的口号: 让天下没有短命的控制台。
3、 问题和 qiankun 的解决方案
- 页面刷新问题
在子应用其中一个页面刷新时,如果没有做处理,可能会面临404或者路由报错的情况。
比较简单的方式是劫持路由做一些改造,而像现在常用的框架Vue、React等等是有react-router之类的路由库。
qiankun 是在 Single-SPA 基础上封装实现的,而Single-SPA 已经劫持了路由,甚至做好了路由切换的事情,在之后是可以直接使用的。
- 子应用的 接入 及 切换返回 问题
Parcels是single-spa的一个高级特性。
parcel,指的是一个与框架无关的组件,由一系列功能构成,可以被应用手动挂载,无需担心由哪种框架实现。
它可以大到一个应用,也可以小至一个组件,可以用任何语言实现,只要能导出正确的生命周期事件即可。
Parcels有3个必填生命周期函数(bootstrap, mount 和 unmount)和1个可选生命周期函数(update)。
这三个也正好是子应用的生命周期钩子。
子应用第一次挂载时,会执行 bootstrap 初始化,然后执行 mount 将它挂载。当应用切换走的时候,会执行 unmount 把应用卸载掉,当它再次回来的时候,
典型场景:你从应用 A 跳到应用 B,过了一会儿又跳回了应用 A
这时是不需要重新执行一次所有的生命周期钩子的,会直接从 mount 阶段继续,这就也做到了应用的缓存。