微前端之道：從理論到實(shí)踐

目    錄
第1章  架構(gòu)與前端 1
1.1  模塊化的目的 1
1.1.1  模塊化的原始時(shí)期 1
1.1.2  Node.js與CommonJS 3
1.1.3  AMD與CMD爭(zhēng)奇斗艷 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ū)動(dòng)設(shè)計(jì) 15
1.4.1  什么是領(lǐng)域 15
1.4.2  核心領(lǐng)域與領(lǐng)域邏輯 16
1.4.3  小結(jié) 17
1.5  微服務(wù)簡(jiǎn)介 17
1.5.1  微服務(wù)的特點(diǎn)及其優(yōu)勢(shì) 18
1.5.2  微服務(wù)帶來(lái)的挑戰(zhàn) 18
1.6  微前端并非萬(wàn)能鑰匙 19
1.7  瀏覽器架構(gòu)發(fā)展史 19
1.7.1  進(jìn)程與線程的基本概念 19
1.7.2  早期單進(jìn)程瀏覽器 20
1.7.3  早期多進(jìn)程瀏覽器 21
1.7.4  現(xiàn)代多進(jìn)程瀏覽器 22
1.7.5  未來(lái)瀏覽器架構(gòu)淺析 22
1.8  本章小結(jié) 23
第2章  微前端概覽 25
2.1  淺談對(duì)微前端的認(rèn)識(shí) 25
2.2  微前端（微服務(wù)）原則 26
2.2.1  獨(dú)立部署 26
2.2.2  故障隔離 27
2.2.3  高度可觀察性 27
2.2.4  圍繞業(yè)務(wù)領(lǐng)域建模 27
2.2.5  自動(dòng)化文化 27
2.2.6  隱藏實(shí)現(xiàn)細(xì)節(jié) 27
2.2.7  分布式治理 28
2.3  微前端的優(yōu)缺點(diǎn) 28
2.3.1  微前端的優(yōu)點(diǎn) 28
2.3.2  微前端的弊端以及挑戰(zhàn) 29
2.4  微前端的適用場(chǎng)景 29
2.4.1  大型企業(yè)應(yīng)用程序 30
2.4.2  復(fù)雜的前端應(yīng)用程序 30
2.4.3  多團(tuán)隊(duì)協(xié)作 30
2.4.4  技術(shù)?；旌?31
2.4.5  增量升級(jí) 31
2.5  微前端實(shí)現(xiàn)要點(diǎ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方案的適用場(chǎng)景 44
3.3.3  基于iframe實(shí)現(xiàn)微前端的小例子 45
3.4  基于Web Component的微前端 49
3.4.1  Web Component使用簡(jiǎn)介 49
3.4.2  基于Web Component實(shí)現(xiàn)微前端示例 51
3.5  微應(yīng)用化 53
微應(yīng)用化實(shí)現(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章  路由式微前端實(shí)踐 63
4.1  項(xiàng)目背景及項(xiàng)目初始化 63
4.1.1  新老項(xiàng)目簡(jiǎn)介 64
4.1.2  新老項(xiàng)目創(chuàng)建及基本結(jié)構(gòu) 64
4.1.3  理解服務(wù)器端渲染 72
4.2  部署真實(shí)服務(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工作流的簡(jiǎn)單實(shí)現(xiàn) 85
4.3.4  利用Jenkins拉取代碼及發(fā)布 89
4.4  Docker的簡(jiǎn)單使用 95
4.4.1  Docker的安裝 96
4.4.2  Docker的基本概念 98
4.4.3  Docker的簡(jiǎn)單使用 100
4.4.4  使用Dockerfile 102
4.5  改造“寶藏”項(xiàng)目的持續(xù)構(gòu)建方式 106
4.5.1  自動(dòng)觸發(fā)Jenkins構(gòu)建的配置步驟 107
4.5.2  在服務(wù)器上打包Vue項(xiàng)目 113
4.5.3  通過Docker改造項(xiàng)目的部署 114
4.6  “白月光”項(xiàng)目部署：在服務(wù)器部署SSR項(xiàng)目 118
4.7  路由式微前端實(shí)現(xiàn) 121
4.8  本章小結(jié) 121
第5章  iframe方案實(shí)踐 122
5.1  iframe基本示例 123
5.1.1  “白月光”廣告項(xiàng)目的創(chuàng)建與集成 123
5.1.2  “寶藏”項(xiàng)目嵌入iframe子項(xiàng)目 128
5.2  iframe通信 135
5.2.1  postMessage簡(jiǎn)介 135
5.2.2  postMessage在iframe方案中的實(shí)踐 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  項(xiàng)目創(chuàng)建及基本目錄結(jié)構(gòu) 151
6.1.2  本地NPM方案的實(shí)踐 154
6.1.3  將NPM方案示例發(fā)布到線上 163
6.2  動(dòng)態(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  動(dòng)態(tài)緩存技術(shù)之CSI、ESI與SSI 198
7.2  SSI技術(shù)簡(jiǎn)單示例 200
7.3  SSR與微前端 202
7.4  本章小結(jié) 206
第8章  微前端框架的簡(jiǎn)易使用 207
8.1  Single-spa 207
8.1.1  Single-spa簡(jiǎn)介 207
8.1.2  Single-spa的使用 209
8.1.3  Single-spa的NPM方案實(shí)踐 212
8.1.4  Single-spa的動(dòng)態(tài)Script方案實(shí)踐 218
8.1.5  Single-spa的Fetch方案實(shí)踐 227
8.1.6  小結(jié) 228
8.2  Qiankun 229
8.2.1  Qiankun的基本理論 229
8.2.2  Qiankun簡(jiǎn)單實(shí)踐 236
8.3  Wujie 249
8.3.1  Wujie的基本理論 250
8.3.2  Wujie簡(jiǎn)單實(shí)踐 255
8.3.3  小結(jié) 263
8.4  MicroApp 263
8.4.1  MicroApp的基本理論 264
8.4.2  MicroApp簡(jiǎn)易實(shí)踐 276
8.5  本章小結(jié) 278