知识篇：（六）微前端架构解析：使用 qiankun 实现灵活的子应用管理

微前端架构解析：使用 qiankun 实现灵活的子应用管理

1.概述：

将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！

2.架构核心：

1、技术栈无关：主框架不限制接入应用的技术栈，微应用具备完全自主权

2、独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

3、增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

4、独立运行：每个微应用之间状态隔离，运行时状态不共享

3.实现原理：

qiankun是一个微前端解决方案，它的核心原理是通过浏览器的customElements特性和shadow DOM来隔离各个微前端应用，从而实现多个Vue应用共存并能够动态加载和卸载。主要原理包括：

• 注册子应用：主应用通过

registerMicroApps函数注册子应用的配置，包括子应用的名称、入口URL、容器、以及触发子应用的路由规则。

• 启动qiankun：主应用通过start函数启动qiankun，它会拦截主应用的路由事件，根据路由规则来加载和卸载子应用。
• 子应用的生命周期函数：每个子应用需要导出一些生命周期函数，如bootstrap、mount和unmount。这些函数会在子应用的不同阶段执行，包括初始化、挂载和卸载。
• 子应用容器：每个子应用都有一个独立的容器，qiankun会将子应用的内容渲染到容器中，以实现隔离。
• 子应用入口URL：子应用的入口URL通常是独立部署在不同的端口或域名上，主应用通过iframe或fetch来加载子应用的内容。