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

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

mmc123125

1387人浏览 · 2024-10-09 18:11:28

mmc123125 · 2024-10-09 18:11:28 发布

微前端架构解析：使用 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来加载子应用的内容。

前端架构分为3部分，从下至上分别为基础技术栈层、自定义组件层、应用层：

基础技术栈层

基础技术栈为整个产品前端部分使用的绘制工具、状态管理工具和产品构建工具等，是整个前端的技术选型，包括React、Redux、Webpack、Nodejs等。

组件层

组件层主要包含产品迭代过程中逐步沉淀的一些自定义组件和通用组件，包括调度、拓扑、布局等常见功能组件，可以供研发快速复用。

应用层

应用层是最重要的模块切分层。主要包含微前端架构的主应用、子应用部分。主应用主要包含通用性的功能，如菜单配置、样式控制等，同时也对整个微前端应用注册进行管理；子应用则更为关注具体业务。主应用和子应用均需要与QIANKUN框架进行对接，通过框架实现模块化的管理。

4.实例：

1.创建应用

 1）创建基座
 vue create vue-base
 2）创建子应用 
 vue create sub-km
 3）创建子应用
 vue create sub-bg

2.主应用配置

在主应用的入口文件（通常是main.js）中，配置qiankun。主要配置包括：

apps导出的参数是registerMicroApps的第一个参数apps:

name: 微应用名称 - 具有唯一性
entry: 微应用入口 - 通过该地址加载微应用
container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用

 import { registerMicroApps, start } from 'qiankun';
 
 // 注册子应用
 registerMicroApps([
   {
     name: 'sub-km',
     entry: 'http://localhost:8081', // 子应用的入口地址
     container: '#sub-km-container', // 子应用容器
     activeRule: '/sub-km', // 触发子应用的路由规则
   },
   {
     name: 'sub-bg',
     entry: 'http://localhost:8082',
     container: '#sub-bg-container',
     activeRule: '/sub-bg',
   },
 ]);
 
 // 启动qiankun
 start();

3.子应用配置

在子应用的入口文件中，需要导出一个生命周期函数，以便qiankun可以正确加载和卸载子应用。

 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 
 Vue.config.productionTip = false;
 
 // 声明一个变量instance，用于保存Vue实例
 let instance = null;
 
 // 渲染函数，接受props参数
 function render(props) {
   // 创建一个新的Vue实例，将App组件渲染到页面上
   instance = new Vue({
     router, // 使用全局的router配置
     render: (h) => h(App), // 渲染App组件
   }).$mount(props.container ? props.container.querySelector('#app') : '#app'); // 将Vue实例挂载到指定的DOM元素上
 }
 
 // 如果是作为子应用加载（由qiankun管理）
 if (window.__POWERED_BY_QIANKUN__) {
   // 通过注入的全局变量设置Webpack的publicPath
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
 }
 
 // 如果不是作为子应用加载
 if (!window.__POWERED_BY_QIANKUN__) {
   // 直接渲染
   render({});
 }
 
 // 子应用的生命周期钩子函数 - 启动
 export async function bootstrap() {
   console.log('sub-km is bootstraped'); // 打印启动信息
 }
 
 // 子应用的生命周期钩子函数 - 挂载
 export async function mount(props) {
   console.log('sub-km is mounted'); // 打印挂载信息
   render(props); // 调用渲染函数，渲染子应用
 }
 
 // 子应用的生命周期钩子函数 - 卸载
 export async function unmount() {
   console.log('sub-km is unmounted'); // 打印卸载信息
   instance.$destroy(); // 销毁Vue实例
 }