微前端架构（一）：基础入门

一、前言

很荣幸由我主导设计并实现了公司自研的微前端框架，目前该框架已在多个业务项目中广泛应用。本文是我结合内部培训、产品文档及相关实践梳理而成的总结，旨在对微前端技术体系进行系统性的整理与沉淀。

作为系列文章的第一篇，本文将从基础概念与核心知识入手，带大家迈入微前端的大门。

我们将围绕以下三个核心问题展开：

1. 微前端是什么？
2. 它能解决什么实际问题？
3. 主流的实现方案有哪些？

二、什么是微前端

微前端（Micro Frontends）是一种借鉴微服务（分而治之）理念的前端架构模式。它将单体前端应用拆分为多个独立自治的小型子应用。

它具备以下核心特征：

1. 技术栈无关性

   • 子应用可使用不同框架（如React、Vue、Angular甚至原生JS），主框架不限制技术选型。

2. 独立开发与部署

   • 应用拆分后，团队可并行开发、测试和部署子应用，无需协调整体发布流程。

三、为什么要微前端

一句话概括就是，它能够解决巨型、复杂单体应用存在的一系列问题：

1. 维护困难

   • 单体应用随业务膨胀导致代码量激增，开发效率低下、升级风险高。微前端通过物理拆分降低复杂度。

2. 技术栈迭代阻力

   • 旧系统无法直接升级框架（如Vue2→Vue3），微前端允许渐进式重构，新旧模块共存。

3. 团队协作效率低

   • 多团队在单一仓库协作易引发冲突。微前端实现团队自治，各团队负责独立子应用。

4. 部署耦合性高

   • 单体应用需全量部署，微前端支持独立发布，更新子应用无需全局回归测试。

需要明确的是，微前端解决的是组织和团队间协作带来的工程问题 ，而不是单纯的某个技术问题。

四、微前端的适用场景

当一个项目面临上述挑战时，便是考虑采用微前端架构的恰当时机。典型的适用场景包括：

1. 多团队协作的巨型应用

   • 需要支持多团队、多厂商、多业务板块应用的发布上线，比如采集2.0。

2. 遗留系统改造

   • 比如某个老系统在技术翻新，但同时又存在持续新增的需求。我们不可能等新系统全部开发好再去替代旧系统。
   • 微前端可以让新增或改造好的功能和原有功能能够同时运行，渐进式地完成重构替换。

五、微前端的副作用

任何技术架构都是一枚硬币的两面，微前端也不例外。它并非银弹，在赋予系统灵活性与独立性的同时，也必然引入新的复杂性与挑战。典型的问题有：

1. 性能损耗

   • 页面加载速度慢：子应用静态资源的获取，以及解析运行子应用脚本有额外的开销。
   • 内存占用高：子应用的缓存、CSS/JS隔离机制，都会带来额外的内存占用。

2. 开发与运维复杂度

   • 调试成本增加：由于主应用与微应用的分层架构，跨应用链路调试难度显著上升。
   • 版本兼容性管理复杂：例如，采集2.0基座在不同网省环境中存在版本差异，业务微应用在各地上线时就面临版本兼容性挑战，需要多版本适配。

3. 设计体验割裂风险

   • 微前端支持子应用的独立演进，但若缺乏统一的设计规约，极易导致不同模块间的视觉风格与交互逻辑不一致，从而造成用户体验的割裂。

六、常见的微前端方案

6.1 iframe方案

iframe 凭借其原生的硬隔离特性，被认为是实现微前端隔离最简单粗暴的方案------样式、JS 互不干扰。但它确实存在许多难以克服的局限性。

其中最典型的问题有：

1. URL 不同步，路由状态丢失

   • 子应用url的切换基于iframe的src，它不会不体现在浏览器地址栏，后退前进按钮无法使用
   • 浏览器刷新 iframe url 状态丢失

2. UI 不同步，DOM 结构不共享，弹窗都弹不到中间

   • 想象一个场景：一个仅占屏幕1/4的 iframe，想要弹出一个全屏遮罩层并居中的对话框。由于 DOM 隔离，这个弹框会被死死限制在 iframe 的边框内，根本无法实现全局居中。

6.2 qiankun方案

qiankun 是由蚂蚁金服孵化的一个微前端实现库。它基于 single-spa 扩展，提供了微前端所需的核心能力：应用加载、应用隔离、应用通信等。

它的核心优势在于

1. 享有先发优势，社区活跃，文档完善
2. 历经了大量企业级项目的锤炼，在易用性、功能完备性、可靠性之间有着绝佳的平衡

6.3 micro-app方案

micro-app是由京东前端团队推出的一款微前端框架，它借鉴了WebComponent的思想，通过js沙箱、样式隔离、元素隔离、路由隔离模拟实现了ShadowDom的隔离特性，并结合CustomElement将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。

它的核心优势在于

1. 高效的隔离实现：借鉴WebComponent的应用隔离方案，更贴近原生，在资源加载和处理效率更高
2. 极简的接入体验：一行代码即可渲染一个微前端应用。

七、学习资料

7.1 学习路径

1. 了解微前端的背景知识

   • 知道微前端是什么，能够解决什么问题。

2. 通读官方文档

   • 通过文档对微前端框架建立初步系统的认识。

3. 试用微前端框架

   • 结合Demo实践API，通过"理解、尝试、验证、再理解"的循环过程，不断加深对技术的掌握。

4. 深入原理

   • 借助社区文章和开源代码，吃透应用隔离、应用通信等核心机制的实现原理。

7.2 相关资料

• qiankun官网

  • 常见问题（必读）

• qiankun技术圆桌

  • qiankun开发团队的微前端系列精华文章

• qiankun-vue-demo

  • 用qiankun来实现vue技术栈的前端微服务

• 掘金社区文章

  • 个人在学习过程中收录的高质量文章

八、总结与寄语

微前端是将单体前端应用拆分为独立子应用的架构模式，具备技术栈无关、独立开发部署等特性，旨在解决巨型应用维护困难、技术栈迭代和团队协作效率低等问题。但它也带来性能损耗和运维复杂度等挑战。常见方案包括iframe、qiankun和micro-app。

微前端底层机制复杂，但其实现库的学习成本很低。以qiankun为例，其API总共才9个，我们结合官方文档与示例项目很快就能入门上手。希望感兴趣的同学积极尝试与应用，让我们互相学习、共同努力、变得更强，加油！