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

目    錄
第1章  架構與前端 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  面向對象到底面向什么 8
1.2.1  面向對象的基本概念 9
1.2.2  類與類之間的關系 9
1.3  理解函數(shù)式編程 11
1.3.1  函數(shù)式的內(nèi)涵 11
1.3.2  組合與管道 13
1.4  領域驅動設計 15
1.4.1  什么是領域 15
1.4.2  核心領域與領域邏輯 16
1.4.3  小結 17
1.5  微服務簡介 17
1.5.1  微服務的特點及其優(yōu)勢 18
1.5.2  微服務帶來的挑戰(zhàn) 18
1.6  微前端并非萬能鑰匙 19
1.7  瀏覽器架構發(fā)展史 19
1.7.1  進程與線程的基本概念 19
1.7.2  早期單進程瀏覽器 20
1.7.3  早期多進程瀏覽器 21
1.7.4  現(xiàn)代多進程瀏覽器 22
1.7.5  未來瀏覽器架構淺析 22
1.8  本章小結 23
第2章  微前端概覽 25
2.1  淺談對微前端的認識 25
2.2  微前端（微服務）原則 26
2.2.1  獨立部署 26
2.2.2  故障隔離 27
2.2.3  高度可觀察性 27
2.2.4  圍繞業(yè)務領域建模 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è)應用程序 30
2.4.2  復雜的前端應用程序 30
2.4.3  多團隊協(xié)作 30
2.4.4  技術?；旌?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  本章小結 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  微應用化 53
微應用化實現(xiàn)思路 54
3.6  微服務化 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  本章小結 61
第4章  路由式微前端實踐 63
4.1  項目背景及項目初始化 63
4.1.1  新老項目簡介 64
4.1.2  新老項目創(chuàng)建及基本結構 64
4.1.3  理解服務器端渲染 72
4.2  部署真實服務器 74
4.2.1  前置資源 74
4.2.2  域名解析及Nginx安裝 76
4.3  Jenkins持續(xù)構建 83
4.3.1  了解Jenkins與持續(xù)構建 83
4.3.2  Jenkins在服務器上的安裝 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ù)構建方式 106
4.5.1  自動觸發(fā)Jenkins構建的配置步驟 107
4.5.2  在服務器上打包Vue項目 113
4.5.3  通過Docker改造項目的部署 114
4.6  “白月光”項目部署：在服務器部署SSR項目 118
4.7  路由式微前端實現(xiàn) 121
4.8  本章小結 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  本章小結 148
第6章  客戶端側組合方案 150
6.1  NPM方案 150
6.1.1  項目創(chuàng)建及基本目錄結構 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  改造微應用 175
6.2.3  主應用改造 181
6.3  WebComponent方案 193
6.4  本章小結 196
第7章  服務側組合方案 198
7.1  動態(tài)緩存技術之CSI、ESI與SSI 198
7.2  SSI技術簡單示例 200
7.3  SSR與微前端 202
7.4  本章小結 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  小結 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  小結 263
8.4  MicroApp 263
8.4.1  MicroApp的基本理論 264
8.4.2  MicroApp簡易實踐 276
8.5  本章小結 278