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

王佳琪，電腦專業畢業，一直從事前端領域工作已7年多，參加了多個專案的研發，有一線工作的經驗。在部落格園區、金塊、騰訊雲社群等網路部落格社群分享科技文章，全網閱讀量在20萬以上。曾著有《手寫Vue.js2.0源碼》一書。

目    錄

 

第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一統天下 8

1.2  面向對象到底面向什麽 8

1.2.1  面向對象的基本概念 9

1.2.2  類與類之間的關系 9

1.3  理解函數式編程 11

1.3.1  函數式的內涵 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  微服務的特點及其優勢 18

1.5.2  微服務帶來的挑戰 18

1.6  微前端並非萬能鑰匙 19

1.7  瀏覽器架構發展史 19

1.7.1  進程與線程的基本概念 19

1.7.2  早期單進程瀏覽器 20

1.7.3  早期多進程瀏覽器 21

1.7.4  現代多進程瀏覽器 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  圍繞業務領域建模 27

2.2.5  自動化文化 27

2.2.6  隱藏實現細節 27

2.2.7  分佈式治理 28

2.3  微前端的優缺點 28

2.3.1  微前端的優點 28

2.3.2  微前端的弊端以及挑戰 29

2.4  微前端的適用場景 29

2.4.1  大型企業應用程序 30

2.4.2  復雜的前端應用程序 30

2.4.3  多團隊協作 30

2.4.4  技術棧混合 31

2.4.5  增量升級 31

2.5  微前端實現要點 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實現微前端的小例子 45

3.4  基於Web Component的微前端 49

3.4.1  Web Component使用簡介 49

3.4.2  基於Web Component實現微前端示例 51

3.5  微應用化 53

微應用化實現思路 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  新老項目創建及基本結構 64

4.1.3  理解服務器端渲染 72

4.2  部署真實服務器 74

4.2.1  前置資源 74

4.2.2  域名解析及Nginx安裝 76

4.3  Jenkins持續構建 83

4.3.1  瞭解Jenkins與持續構建 83

4.3.2  Jenkins在服務器上的安裝 84

4.3.3  Jenkins工作流的簡單實現 85

4.3.4  利用Jenkins拉取代碼及發布 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  改造“寶藏”項目的持續構建方式 106

4.5.1  自動觸發Jenkins構建的配置步驟 107

4.5.2  在服務器上打包Vue項目 113

4.5.3  通過Docker改造項目的部署 114

4.6  “白月光”項目部署：在服務器部署SSR項目 118

4.7  路由式微前端實現 121

4.8  本章小結 121

第5章  iframe方案實踐 122

5.1  iframe基本示例 123

5.1.1  “白月光”廣告項目的創建與集成 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共享登錄態 145

5.4  本章小結 148

第6章  客戶端側組合方案 150

6.1  NPM方案 150

6.1.1  項目創建及基本目錄結構 151

6.1.2  本地NPM方案的實踐 154

6.1.3  將NPM方案示例發布到線上 163

6.2  動態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  動態緩存技術之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的動態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