微前端乾坤(qiankun)从入门到精通教程

目录

1. 什么是微前端

2. 乾坤框架介绍

3. 环境准备

4. 快速开始

5. 主应用配置

6. 子应用配置

7. 应用间通信

8. 路由管理

9. 样式隔离

10. JS沙箱

11. 生命周期

12. 最佳实践

13. 常见问题

14. 进阶应用

什么是微前端

概念介绍

微前端的优势

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

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

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

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

适用场景

• 大型企业级应用

• 多团队协作开发

• 技术栈迁移

• 遗留系统改造

乾坤框架介绍

什么是乾坤

乾坤的特性

• 📦 基于 single-spa 封装：提供了更加开箱即用的 API

• 📱 技术栈无关：任意技术栈的应用均可使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架

• 💪 HTML Entry 接入方式：让你接入微应用像使用 iframe 一样简单

• 🛡️ 样式隔离：确保微应用之间样式互相不干扰

• 🧳 JS 沙箱：确保微应用之间 全局变量/事件 不冲突

• ⚡️ 资源预加载：在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度

• 🔌 umi 插件：提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统

环境准备

系统要求

• Node.js >= 12.0.0

• npm >= 6.0.0 或 yarn >= 1.0.0

安装乾坤

快速开始

项目结构

创建主应用

主应用配置

基础配置

HTML 模板

高级配置选项

子应用配置

Vue 子应用配置

1. 修改 webpack 配置

2. 修改入口文件

React 子应用配置

1. 修改 webpack 配置

2. 修改入口文件

应用间通信

全局状态管理

子应用中使用全局状态

自定义通信方案

路由管理

主应用路由配置

子应用路由配置

样式隔离

严格样式隔离

实验性样式隔离

手动样式隔离

动态样式处理

JS沙箱

沙箱机制

1. LegacySandBox：单例模式，同一时间只能有一个激活的微应用

2. ProxySandBox：多例模式，支持多个微应用同时激活

3. SnapshotSandBox：快照模式，兼容不支持 Proxy 的浏览器

沙箱配置

全局变量处理

生命周期

微应用生命周期详解

主应用生命周期钩子

最佳实践

1. 应用拆分原则

• 业务维度拆分：按照业务模块进行拆分

• 技术维度拆分：按照技术栈进行拆分

• 团队维度拆分：按照团队职责进行拆分

2. 资源加载优化

3. 错误处理

4. 性能监控

常见问题

1. 跨域问题

2. 静态资源加载问题

3. 路由冲突问题

4. 样式冲突问题

5. 全局变量污染

进阶应用

1. 动态加载微应用

2. 微应用嵌套

3. 微应用预加载策略

4. 微应用状态持久化

5. 微应用权限控制

总结

1. 基础概念：理解微前端的核心思想和优势

2. 快速上手：能够搭建基本的微前端架构

3. 核心功能：掌握应用注册、生命周期、通信等核心功能

4. 高级特性：了解样式隔离、JS沙箱、预加载等高级特性

5. 最佳实践：学会性能优化、错误处理、权限控制等实践技巧

• 从简单场景开始，逐步引入复杂功能

• 重视应用间的解耦和独立性

• 建立完善的开发和部署流程

• 持续监控和优化性能