微前端之道：從理論到實踐

目    錄
第1章  架構(gòu)與前端 1
1.1  模塊化的目的 1
1.1.1  模塊化的原始時期 1
1.1.2  Node.js與CommonJS 3
1.1.3  AMD與CMD爭奇斗艷 5
1.1.4  ES6 Module一統(tǒng)天下 8
1.2  面向?qū)ο蟮降酌嫦蚴裁?8
1.2.1  面向?qū)ο蟮幕靖拍?9
1.2.2  類與類之間的關(guān)系 9
1.3  理解函數(shù)式編程 11
1.3.1  函數(shù)式的內(nèi)涵 11
1.3.2  組合與管道 13
1.4  領(lǐng)域驅(qū)動設(shè)計 15
1.4.1  什么是領(lǐng)域 15
1.4.2  核心領(lǐng)域與領(lǐng)域邏輯 16
1.4.3  小結(jié) 17
1.5  微服務(wù)簡介 17
1.5.1  微服務(wù)的特點及其優(yōu)勢 18
1.5.2  微服務(wù)帶來的挑戰(zhàn) 18
1.6  微前端并非萬能鑰匙 19
1.7  瀏覽器架構(gòu)發(fā)展史 19
1.7.1  進程與線程的基本概念 19
1.7.2  早期單進程瀏覽器 20
1.7.3  早期多進程瀏覽器 21
1.7.4  現(xiàn)代多進程瀏覽器 22
1.7.5  未來瀏覽器架構(gòu)淺析 22
1.8  本章小結(jié) 23
第2章  微前端概覽 25
2.1  淺談對微前端的認(rèn)識 25
2.2  微前端（微服務(wù)）原則 26
2.2.1  獨立部署 26
2.2.2  故障隔離 27
2.2.3  高度可觀察性 27
2.2.4  圍繞業(yè)務(wù)領(lǐng)域建模 27
2.2.5  自動化文化 27
2.2.6  隱藏實現(xiàn)細節(jié) 27
2.2.7  分布式治理 28
2.3  微前端的優(yōu)缺點 28
2.3.1  微前端的優(yōu)點 28
2.3.2  微前端的弊端以及挑戰(zhàn) 29
2.4  微前端的適用場景 29
2.4.1  大型企業(yè)應(yīng)用程序 30
2.4.2  復(fù)雜的前端應(yīng)用程序 30
2.4.3  多團隊協(xié)作 30
2.4.4  技術(shù)棧混合 31
2.4.5  增量升級 31
2.5  微前端實現(xiàn)要點 31
2.5.1  微前端拆分思路 32
2.5.2  界限上下文 34
2.5.3  組合 34
2.5.4  路由 35
2.5.5  通信 35
2.5.6  隔離 36
2.6  本章小結(jié) 36
第3章  微前端方案概覽 38
3.1  微前端方案到底有哪些 38
3.2  路由式微前端 39
3.3  基于iframe的微前端示例 43
3.3.1  iframe方案核心 43
3.3.2  淺談iframe方案的適用場景 44
3.3.3  基于iframe實現(xiàn)微前端的小例子 45
3.4  基于Web Component的微前端 49
3.4.1  Web Component使用簡介 49
3.4.2  基于Web Component實現(xiàn)微前端示例 51
3.5  微應(yīng)用化 53
微應(yīng)用化實現(xiàn)思路 54
3.6  微服務(wù)化 55
3.7  微件化 56
3.8  基于開源框架的微前端方案 57
3.8.1  Single-SPA 57
3.8.2  Qiankun 57
3.8.3  Wujie 58
3.8.4  MicroApp 58
3.8.5  Module Federation 59
3.8.6  Bit 59
3.8.7  FrintJS 60
3.8.8  其他 60
3.9  本章小結(jié) 61
第4章  路由式微前端實踐 63
4.1  項目背景及項目初始化 63
4.1.1  新老項目簡介 64
4.1.2  新老項目創(chuàng)建及基本結(jié)構(gòu) 64
4.1.3  理解服務(wù)器端渲染 72
4.2  部署真實服務(wù)器 74
4.2.1  前置資源 74
4.2.2  域名解析及Nginx安裝 76
4.3  Jenkins持續(xù)構(gòu)建 83
4.3.1  了解Jenkins與持續(xù)構(gòu)建 83
4.3.2  Jenkins在服務(wù)器上的安裝 84
4.3.3  Jenkins工作流的簡單實現(xiàn) 85
4.3.4  利用Jenkins拉取代碼及發(fā)布 89
4.4  Docker的簡單使用 95
4.4.1  Docker的安裝 96
4.4.2  Docker的基本概念 98
4.4.3  Docker的簡單使用 100
4.4.4  使用Dockerfile 102
4.5  改造“寶藏”項目的持續(xù)構(gòu)建方式 106
4.5.1  自動觸發(fā)Jenkins構(gòu)建的配置步驟 107
4.5.2  在服務(wù)器上打包Vue項目 113
4.5.3  通過Docker改造項目的部署 114
4.6  “白月光”項目部署：在服務(wù)器部署SSR項目 118
4.7  路由式微前端實現(xiàn) 121
4.8  本章小結(jié) 121
第5章  iframe方案實踐 122
5.1  iframe基本示例 123
5.1.1  “白月光”廣告項目的創(chuàng)建與集成 123
5.1.2  “寶藏”項目嵌入iframe子項目 128
5.2  iframe通信 135
5.2.1  postMessage簡介 135
5.2.2  postMessage在iframe方案中的實踐 136
5.2.3  封裝postMessage 139
5.3  iframe共享登錄態(tài) 145
5.4  本章小結(jié) 148
第6章  客戶端側(cè)組合方案 150
6.1  NPM方案 150
6.1.1  項目創(chuàng)建及基本目錄結(jié)構(gòu) 151
6.1.2  本地NPM方案的實踐 154
6.1.3  將NPM方案示例發(fā)布到線上 163
6.2  動態(tài)Script方案 171
6.2.1  生成打包資源表 172
6.2.2  改造微應(yīng)用 175
6.2.3  主應(yīng)用改造 181
6.3  WebComponent方案 193
6.4  本章小結(jié) 196
第7章  服務(wù)側(cè)組合方案 198
7.1  動態(tài)緩存技術(shù)之CSI、ESI與SSI 198
7.2  SSI技術(shù)簡單示例 200
7.3  SSR與微前端 202
7.4  本章小結(jié) 206
第8章  微前端框架的簡易使用 207
8.1  Single-spa 207
8.1.1  Single-spa簡介 207
8.1.2  Single-spa的使用 209
8.1.3  Single-spa的NPM方案實踐 212
8.1.4  Single-spa的動態(tài)Script方案實踐 218
8.1.5  Single-spa的Fetch方案實踐 227
8.1.6  小結(jié) 228
8.2  Qiankun 229
8.2.1  Qiankun的基本理論 229
8.2.2  Qiankun簡單實踐 236
8.3  Wujie 249
8.3.1  Wujie的基本理論 250
8.3.2  Wujie簡單實踐 255
8.3.3  小結(jié) 263
8.4  MicroApp 263
8.4.1  MicroApp的基本理論 264
8.4.2  MicroApp簡易實踐 276
8.5  本章小結(jié) 278