微前端实战：打造高效、灵活的前端应用架构

本文介绍: 微前端（Mic ro Fr on t end s）是一种将大型单页应用拆分为多个独立的小型应用的技术方案。每个小型应用都可以独立开发、部署和运行，它们之间通过共享公共资源（如样式、组件等）来实现数据和状态的同步。微前端的核心思想是将前端应用分解为一组可独立维护、独立部署的子应用，从而提高开发效率、降低维护成本，同时保证系统的灵活性和可扩展性。将多个独立的应用程序组合成一个统一的前端应用程序将基于不同框架的代码组合在一起浏览器端组合、服务端组合以及路由高效的开发团队实践和项目工作流。

随着互联网行业的快速发展，前端应用的规模和复杂度也在不断增加。为了应对这种挑战，越来越多的企业和开发者开始探索新的前端架构模式。微前端作为一种新兴的前端架构模式，凭借其高度模块化、独立部署、易于扩展等特点，逐渐成为了业界的热门话题。本文将通过一个实际案例，详细介绍微前端的概念、原理以及在实战中的应用。

微前端（Mic r o Fr on t end s）是一种将大型单页应用拆分为多个独立的小型应用的技术方案。每个小型应用都可以独立开发、部署和运行，它们之间通过共享公共资源（如样式、组件等）来实现数据和状态的同步。微前端的核心思想是将前端应用分解为一组可独立维护、独立部署的子应用，从而提高开发效率、降低维护成本，同时保证系统的灵活性和可扩展性。

微前端将大型应用拆分为多个小型应用，每个应用负责一个特定的功能或模块。这种模块化的设计使得开发者可以更加专注于某个功能的开发，提高开发效率。

每个微应用都可以独立部署，无需对整个应用进行整体部署。这大大简化了部署过程，降低了部署风险。

当需要添加新功能时，只需开发一个新的微应用并将其集成到主应用中，而无需修改现有的代码。这使得系统具有良好的可扩展性。

第Ⅰ部分 微前端初体验

第1章 什么是微前端 3

1.1 概览图 4

1.1.1 系统和团队 5

1.1.2 前端 8

1.1.3 前端集成 11

1.1.4 公共话题 13

1.2 微前端解决了哪些问题 14

1.2.1 优化功能开发 14

1.2.2 不再有前端巨石架构 15

1.2.3 适应变化 16

1.2.4 自主的优势 19

1.3 微前端的缺点 21

1.3.1 冗余 21

1.3.2 一致性 21

1.3.3 异质性 22

1.3.4 更多的前端代码 22

1.4 使用微前端的合理时机 23

1.4.1 适合大中型项目 23

1.4.2 在Web应用程序中使用效果最好 23

1.4.3 效率与开销 24

1.4.4 微前端不适用的场景 25

1.4.5 谁在使用微前端 26

1.5 本章小结 26

第2章 我的第一个微前端项目 29

2.1 The Tractor Store简介 30

2.1.1 准备开始 30

2.1.2 运行书中的示例代码 32

2.2 通过链接进行页面跳转 35

2.2.1 数据所有权 35

2.2.2 团队契约 36

2.2.3 如何实现 37

2.2.4 处理URL的变化 40

2.2.5 优点 41

2.2.6 缺点 42

2.2.7 何时使用链接集成技术 42

2.3 通过iframe进行组合 42

2.3.1 如何实现 43

2.3.2 优点 45

2.3.3 缺点 45

2.3.4 何时使用iframe集成技术 46

2.4 内容预告 46

2.5 本章小结 47

第Ⅱ部分 路由、组合与通信

第3章 使用Ajax进行组合与服务端路由 51

3.1 通过Ajax进行组合 52

3.1.1 如何实现 53

3.1.2 样式与脚本的命名空间 55

3.1.3 声明式地加载h-include 59

3.1.4 优点 59

3.1.5 缺点 61

3.1.6 何时使用Ajax集成 62

3.1.7 总结 62

3.2 通过Nginx实现服务端路由 63

3.2.1 如何实现 66

3.2.2 资源的命名空间 69

3.2.3 路由配置的方法 70

3.2.4 基础设施的归属 71

3.2.5 何时应使用单个域名 73

3.3 本章小结 73

第4章 服务端组合 75

4.1 通过Nginx和服务端包含(SSI)进行组合 76

4.1.1 如何实现 77

4.1.2 更少的加载次数 80

4.2 处理不可靠的片段 81

4.2.1 可分离的片段 82

4.2.2 集成Near You片段 83

4.2.3 超时和回退 84

4.2.4 回退内容 86

4.3 深入研究标签的组装性能 87

4.3.1 并行加载 87

4.3.2 嵌套的片段 88

4.3.3 延迟加载 89

4.3.4 首字节时间和流式输出 90

4.4 其他解决方案概述 92

4.4.1 Edge-Side Includes 92

4.4.2 Zalando Tailor 93

4.4.3 Podium 95

4.4.4 哪种方案更适合 102

4.5 服务端组合的优缺点 104

4.5.1 优点 104

4.5.2 缺点 104

4.5.3 使用服务端集成的时机 105

4.6 本章小结 106

第5章 客户端组合 107

5.1 使用Web Component封装微前端 108

5.1.1 如何实现 110

5.1.2 将框架封装在Web Component内 115

5.2 使用Shadow DOM实现样式隔离 117

5.2.1 创建shadow root 117

5.2.2 样式隔离 118

5.2.3 何时使用Shadow DOM 120

5.3 使用Web Component进行组合的优缺点 121

5.3.1 优点 121

5.3.2 缺点 122

5.3.3 使用客户端集成的时机 122

5.4 本章小结 123

第6章 通信模式 125

6.1 用户界面通信 126

6.1.1 父级页面到片段 127

6.1.2 片段到父级页面 131

6.1.3 片段到片段 135

6.1.4 使用Broadcast Channel API发布/订阅 140

6.1.5 UI通信更适合什么场景 142

6.2 其他通信机制 143

6.3 本章小结 148

第7章 客户端路由和应用程序容器 149

7.1 应用程序容器中的扁平化路由 1521

7.2 双层路由的应用程序容器 162

7.3 single-spa元框架的简述 171

7.4 来自统一单页面应用的挑战 178

7.5 本章小结 183

第8章 组合和多端渲染 185

8.1 结合使用服务端和客户端组合 187

8.2 何时适合采用多端组合 195

8.3 本章小结 197

第9章 适合我们项目的架构 199

9.1 复习专业术语 200

9.2 复杂度的比较 206

9.3 是构建网站还是应用程序 208

9.4 选择正确的架构和集成技术 211

9.5 本章小结 216

第Ⅲ部分 如何做到快速、一致、有效

第10章 资源加载 221

10.1 资源引用策略 222

10.2 打包粒度 238

10.3 按需加载 241

10.4 本章小结 242

第11章 至关重要的性能 243

11.1 高性能架构设计 244

11.2 精简并复用vendor库 251

11.3 本章小结 272

第12章 UI设计系统 275

12.1 为什么需要一个设计系统 276

12.2 公用设计系统与自治团队 279

12.3 运行时整合与构建时整合 286

12.4 样式库中的组件：通用与定制 293

12.5 哪些组件应该沉淀到中心化的样式库中 298

12.6 本章小结 303

第13章 团队及职责边界 305

13.1 将系统与团队对齐 306

13.2 知识分享 314

13.3 横向共性问题 317

13.4 技术多样性 319

13.5 本章小结 323

第14章 迁移、本地开发及测试 325

14.1 迁移 326

14.2 本地开发 333

14.3 测试 339

14.4 本章小结 341