了解 什么是微前端 时，阅读的几篇文章分享

目录

一. 什么是微前端？

1.1 官网介绍

1.2 核心价值

1.3 解决的问题

二. 为什么要使用 qiankun？

2.1 为什么使用 iframe?

2.2 对比微前端技术选型

2.3 应用集成方式分析

---

一. 什么是微前端？

1.1 官网介绍

微前端是一种 多个团队 通过 独立发布功能 的方式，共同构建现代化 web 应用的 技术手段 及 方法策略

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

Micro Frontends - extending the microservice idea to frontend developmenthttps://micro-frontends.org/

Micro Frontendshttps://martinfowler.com/articles/micro-frontends.html

1.2 核心价值

登录 · 语雀十万阿里人都在用的笔记与文档知识库，面向企业、组织或个人，提供全新的体系化知识管理，打造轻松流畅的工作协同。金融级数据安全、丰富的应用场景、强大的知识创作与管理，助力企业、个人轻松拥有云端知识库https://www.yuque.com/kuitos/gky7yw/rhduwc

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

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

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

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

对于开发来说：

1. 可维护性更好：每个微应用代码量少，不容易产生不可预知的耦合
2. 开发效率更高：每个微应用独立开发、测试，构建速度更快，模块级复用
3. 接入成本更低：技术栈无关

对于用户来说：

1. 容错性更高：一个微应用不可用，不会影响其他应用的展示
2. 用户体验更好：资源共享

对于公司来说：

1. 横向的组织扩展成为可能

1.3 解决的问题

微前端架构旨在解决：

单体应用在一个相对长的时间跨度下，由于 参与的人员、团队的增多、变迁，从一个普通应用演变成一个 巨石应用 (Frontend Monolith) 后，随之而来的 应用不可维护 的问题

这类问题在企业级 Web 应用中尤其常见

业务痛点：

• 可维护性差（产生不可预期耦合的可能性大）
• 开发效率低（应用运行、构建时间长应用运行、构建时间长）

二. 为什么要使用 qiankun？

2.1 为什么使用 iframe?

登录 · 语雀十万阿里人都在用的笔记与文档知识库，面向企业、组织或个人，提供全新的体系化知识管理，打造轻松流畅的工作协同。金融级数据安全、丰富的应用场景、强大的知识创作与管理，助力企业、个人轻松拥有云端知识库https://www.yuque.com/kuitos/gky7yw/gesexv

2.2 对比微前端技术选型

集成方式	集成时机	优点	缺点
NPM	构建时	做构建优化方便	构建时间长、子应用更新依赖主应用发布
iframe	运行时	接入简单（JS、CSS天然隔离）	DOM 结构不共享、内存变量不共享、性能差
Single-spa (JavaScriptEntry)	运行时	解决了 iframe 的问题	非生产可用、侵入性强
qiankun (HTMLEntry)	运行时	开箱即用（提供JS沙箱、CSS隔离、预加载）	复用粒度只能为应用级别
ModuleFederation	运行时	复用粒度更细	要求 WebPack5+

2.3 应用集成方式分析

可能是你见过最完善的微前端解决方案 - 知乎Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends前言 TL;DR 想跳过技术细节直接看怎么实践的同学可以拖到文…https://zhuanlan.zhihu.com/p/78362028