第Ⅰ部分  微前端初体验

第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.2.1  全局上下文和身份验证 143

6.2.2  管理状态 145

6.2.3  前后端通信 145

6.2.4  数据复制 146

6.3  本章小结 148

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

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

7.1.1  什么是应用程序容器 152

7.1.2  剖析应用程序容器 153

7.1.3  客户端路由 155

7.1.4  页面的渲染 158

7.1.5  应用程序容器和团队间的契约 161

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

7.2.1  实现一级路由 163

7.2.2  团队层面的路由实现 164

7.2.3  在URL变化时会发生什么 166

7.2.4  应用程序容器API 169

7.3  single-spa元框架的简述 171

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

7.4.1  需要思考的问题 179

7.4.2  何时适合使用统一的单页面应用 181

7.5  本章小结 183

第8章  组合和多端渲染 185

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

8.1.1  SSI和Web Component 188

8.1.2  团队间的约定 194

8.1.3  其他解决方案 195

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

8.2.1  纯服务端组合的多端渲染 195

8.2.2  复杂性增加 196

8.2.3  多端的统一单页面应用 196

8.3  本章小结 197

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

9.1  复习专业术语 200

9.1.1  路由和页面切换 200

9.1.2  组合技术 201

9.1.3  顶层架构 203

9.2  复杂度的比较 206

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

9.3.1  Documents-to-Applications Continuum 208

9.3.2  服务端渲染、客户端渲染和多端渲染的选择 210

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

9.4.1  强隔离(遗留系统，第三方引入) 213

9.4.2  快速的首页加载/渐进式增强 213

9.4.3  即时的用户反馈 214

9.4.4  路由跳转 215

9.4.5  同一页面集成多个微前端 216

9.5  本章小结 216

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

第10章  资源加载 221

10.1  资源引用策略 222

10.1.1  直接引用 222

10.1.2  挑战：缓存破坏和独立部署 223

10.1.3  通过重定向引用(客户端) 225

10.1.4  通过include引用(服务端) 227

10.1.5  挑战：同步标签和资源版本 230

10.1.6  代码嵌入 233

10.1.7  集成解决方案(Tailor、Podium等) 234

10.1.8  简单总结 237

10.2  打包粒度 238

10.2.1  HTTP/2 238

10.2.2  all-in-one打包方式 239

10.2.3  以团队维度进行打包 239

10.2.4  以页面和片段的维度进行打包 240

10.3  按需加载 241

10.3.1  微前端代理 241

10.3.2  CSS的懒加载 242

10.4  本章小结 242

第11章  至关重要的性能 243

11.1  高性能架构设计 244

11.1.1  性能指标因团队而异 245

11.1.2  多团队协作时的性能预算 246

11.1.3  排查性能下降的原因 247

11.1.4  性能收益 249

11.2  精简并复用vendor库 251

11.2.1  团队自治的代价 251

11.2.2  精简代码 253

11.2.3  全局范围内引用相同版本的verdor库 254

11.2.4  vendor代码版本管理 256

11.2.5  不要共享业务代码 271

11.3  本章小结 272

第12章  UI设计系统 275

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

12.1.1  目标与作用 278

12.1.2  益处 278

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

12.2.1  是否有必要搭建自己的设计系统 279

12.2.2  不断完善设计系统 280

12.2.3  持续投入以及责任到人 280

12.2.4  获得团队的认可 281

12.2.5  开发流程：集中模式与联合模式 283

12.2.6  开发阶段 285

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

12.3.1  运行时整合 287

12.3.2  版本包 289

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

12.4.1  组件类型的选择 293

12.4.2  改变 297

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

12.5.1  公用组件的成本 299

12.5.2  公用样式库或者本地开发 299

12.5.3  公用样式库和私有样式库 302

12.6  本章小结 303

第13章  团队及职责边界 305

13.1  将系统与团队对齐 306

13.1.1  明确团队边界 307

13.1.2  团队组成 310

13.1.3  文化改变 313

13.2  知识分享 314

13.2.1  实践社区 315

13.2.2  学习及赋能 316

13.2.3  展示工作 316

13.3  横向共性问题 317

13.3.1  中心化的基础设施 317

13.3.2  专业化的组件团队 318

13.3.3  一致的协议和约定 319

13.4  技术多样性 319

13.4.1  工具箱和默认选择 319

13.4.2  前端蓝图 320

13.4.3  不要抵触复制 322

13.4.4  步调一致的好处 322

13.5  本章小结 323

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

14.1  迁移 326

14.1.1  概念验证和示范作用 326

14.1.2  策略一：逐个迁移 328

14.1.3  策略二：前端先行 330

14.1.4  策略三：greenfield和“大爆炸” 332

14.2  本地开发 333

14.2.1  不要运行其他团队的代码 334

14.2.2  模拟页面片段 335

14.2.3  沙盒化代码片段 337

14.2.4  从备机环境或者生产环境中集成其他团队的微前端 339

14.3  测试 339

14.4  本章小结 341