记2023年的qiankun微前端开发经验

什么是微前端？

微前端是一种前端架构方法，它借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。

核心思路：

• 可独立开发、运行、部署
• 模块化、可拓展

适用场景：

• 大型的Web应用
• 公司内部的平台系统
• 对已有成熟项目的拓展

场景分析：

1. 大型的web应用：

架构设计阶段的完全微前端架构

利用微前端的架构思想，将大型web应用逐步拆分设计成小型的、耦合性较低的并在后期方便扩容的块。以应对在业务不断升级和迭代的过程中，尽量在设计阶段规避带来的项目体积、改造成本等问题。从而优化和提升开发效率。

2. 公司内部的平台系统：

由业务、数据等聚合需求发起的聚合式微前端架构

随着数据聚合平台往往承担了该领域下聚合的责任。在过去的平台，前端技术往往采用iframe和window.open等方式将业务内容融合到平台上，兼容性较差的体验慢慢被现代用户诟病。随着微前端的出现，这种格局正在慢慢改变。

3. 对已有成熟项目的拓展

避免推翻重建或其他拓展性要求发起的嵌入式、拓展式微前端架构

一些项目使用的是老旧的技术，使用微前端之后，对于新功能的开发可以使用新的技术框架，这样避免了推翻重构，也避免了继续基于过时的技术进行开发。

如何进行微前端架构设计？

我们以完整的构建一个大型web应用为例，进行微前端的架构设计。

1. 技术选型

微前端的技术选型部分与常规的前端应用选型类似，在关注前端框架、构建工具、状态管理工具等的同时，需关注微前端框架的选型，如qiankun、single-spa、wujie等等。这里简单对比一下qiankun的优劣势分析：

优势

• 基于 single-spa，拥有强大的社区支持和活跃的维护团队。
• 提供了完善的生命周期钩子，便于主应用和子应用之间的通信和状态管理。
• 支持多种前端框架，如 React、Vue、Angular 等，具有良好的框架无关性。
• 提供了沙箱机制，确保子应用之间的隔离性，减少冲突。

劣势

• 对于子应用的路由管理有一定的限制，需要遵循 qiankun 的路由规范。
• 在处理复杂场景时，可能需要额外的配置和优化。
• 对于某些特定框架（如Vue3）的支持可能存在延迟或不完善的情况。

2. 拆分规则

在整体项目的设计初期，首先根据业务将系统拆分为多个独立的小型应用，每个小型应用对应一个业务模块，可根据实际与产品端进行具体的划分。

3. 通信机制与数据共享

主应用与子应用的通讯机制与数据共享实际上就是参数如何传递的过程。

• qiankun提供的通讯API
• 本地存储Local Storage
• vuex等状态管理
• ...

4. 构建部署

依赖现有的CICD流程分git仓库进行管理。

符合以下原则：

• 主应用、子应用依照拆分规则独立git仓库
• 打包、部署解耦
• 主子之间、子子之间互不影响

5.UI 组件协同

• 统一同基座子应用与主应用的UI库（包括版本）、框架版本
• 统一封装前端组件上传私服、统一封装前端方法上传私服（components untils）或可copy联动

根据规范的代码范例才更容易的进行low code快速生成模板代码（增删改查等操作）

6.权限统一管理

• 集成统一的token、菜单、角色、按钮等权限管理。

简化开发和维护：通过统一的鉴权体系，可以避免每个微前端应用都需要实现自己的用户认证和授权逻辑，简化开发和维护工作。由主应用统一获取token令牌，子应用通过载体中介获取令牌

7.监控、日志设计

• 全局埋点监控：主应用级路由拦截根据应用前缀区分pv量。
• 应用停留监控：根据Qiankun生命周期在挂载子应用钩子中触发计时器，在卸载子应用钩子中终止计时器，可对应用停留时长进行监控。
• 日志推送：根据Qiankun生命周期挂载子应用时，获取该子应用预设的提示信息进行弹窗提醒。

8.关联大数据展示

主应用作为以业务单元为基础的子应用的载体，采集监控、埋点等数据汇总、分析、利用图形展示。

• 方向1：数据驱动迭代、产品设计
• 方向2：性能分析
• 方向3：...

qiankun的部分代码基础

具体请参考qiankun官网：qiankun.umijs.org/zh/guide

准备

首先我们需要创建两个独立的 vue 项目,一个是主应用 shell（壳）,一个是微应用 app1。 两个项目使用 vue-cli 分别初始化,并安装 qiankun

vue create micro-frontend-shell 
cd micro-frontend-shell 
npm install qiankun # 或 yarn add qiankun

vue create micro-frontend-app1
cd micro-frontend-app1
npm install qiankun # 或 yarn add qiankun

shell中配置四要素：

• 应用名
• 资源地址
• 挂载div
• 匹配前缀

// main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app1'
  }
]);

start();

<!-- App.vue -->
<div id="container"></div>

总结

微前端架构最大的优势在于它实现了系统模块的完全解耦。原来复杂得难以维护的单体代码,通过分解成独立的子应用模块后,每个子应用内部变得极其清晰和易管理。不同子应用可以由专精的团队独立负责,大大提升了开发效率。