微前端實(shí)戰(zhàn)

第Ⅰ部分 微前端初體驗(yàn)
第1章 什么是微前端 3
1.1 概覽圖 4
1.1.1 系統(tǒng)和團(tuán)隊(duì) 5
1.1.2 前端 8
1.1.3 前端集成 11
1.1.4 公共話題 13
1.2 微前端解決了哪些問題 14
1.2.1 優(yōu)化功能開發(fā) 14
1.2.2 不再有前端巨石架構(gòu) 15
1.2.3 適應(yīng)變化 16
1.2.4 自主的優(yōu)勢 19
1.3 微前端的缺點(diǎn) 21
1.3.1 冗余 21
1.3.2 一致性 21
1.3.3 異質(zhì)性 22
1.3.4 更多的前端代碼 22
1.4 使用微前端的合理時(shí)機(jī) 23
1.4.1 適合大中型項(xiàng)目 23
1.4.2 在Web應(yīng)用程序中使用效果最好 23
1.4.3 效率與開銷 24
1.4.4 微前端不適用的場景 25
1.4.5 誰在使用微前端 26
1.5 本章小結(jié) 26
第2章 我的第一個(gè)微前端項(xiàng)目 29
2.1 The Tractor Store簡介 30
2.1.1 準(zhǔn)備開始 30
2.1.2 運(yùn)行書中的示例代碼 32
2.2 通過鏈接進(jìn)行頁面跳轉(zhuǎn) 35
2.2.1 數(shù)據(jù)所有權(quán) 35
2.2.2 團(tuán)隊(duì)契約 36
2.2.3 如何實(shí)現(xiàn) 37
2.2.4 處理URL的變化 40
2.2.5 優(yōu)點(diǎn) 41
2.2.6 缺點(diǎn) 42
2.2.7 何時(shí)使用鏈接集成技術(shù) 42
2.3 通過iframe進(jìn)行組合 42
2.3.1 如何實(shí)現(xiàn) 43
2.3.2 優(yōu)點(diǎn) 45
2.3.3 缺點(diǎn) 45
2.3.4 何時(shí)使用iframe集成技術(shù) 46
2.4 內(nèi)容預(yù)告 46
2.5 本章小結(jié) 47
第Ⅱ部分 路由、組合與通信
第3章 使用Ajax進(jìn)行組合與服務(wù)端路由 51
3.1 通過Ajax進(jìn)行組合 52
3.1.1 如何實(shí)現(xiàn) 53
3.1.2 樣式與腳本的命名空間 55
3.1.3 聲明式地加載h-include 59
3.1.4 優(yōu)點(diǎn) 59
3.1.5 缺點(diǎn) 61
3.1.6 何時(shí)使用Ajax集成 62
3.1.7 總結(jié) 62
3.2 通過Nginx實(shí)現(xiàn)服務(wù)端路由 63
3.2.1 如何實(shí)現(xiàn) 66
3.2.2 資源的命名空間 69
3.2.3 路由配置的方法 70
3.2.4 基礎(chǔ)設(shè)施的歸屬 71
3.2.5 何時(shí)應(yīng)使用單個(gè)域名 73
3.3 本章小結(jié) 73
第4章 服務(wù)端組合 75
4.1 通過Nginx和服務(wù)端包含(SSI)進(jìn)行組合 76
4.1.1 如何實(shí)現(xiàn) 77
4.1.2 更少的加載次數(shù) 80
4.2 處理不可靠的片段 81
4.2.1 可分離的片段 82
4.2.2 集成Near You片段 83
4.2.3 超時(shí)和回退 84
4.2.4 回退內(nèi)容 86
4.3 深入研究標(biāo)簽的組裝性能 87
4.3.1 并行加載 87
4.3.2 嵌套的片段 88
4.3.3 延遲加載 89
4.3.4 首字節(jié)時(shí)間和流式輸出 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 服務(wù)端組合的優(yōu)缺點(diǎn) 104
4.5.1 優(yōu)點(diǎn) 104
4.5.2 缺點(diǎn) 104
4.5.3 使用服務(wù)端集成的時(shí)機(jī) 105
4.6 本章小結(jié) 106
第5章 客戶端組合 107
5.1 使用Web Component封裝微前端 108
5.1.1 如何實(shí)現(xiàn) 110
5.1.2 將框架封裝在Web Component內(nèi) 115
5.2 使用Shadow DOM實(shí)現(xiàn)樣式隔離 117
5.2.1 創(chuàng)建shadow root 117
5.2.2 樣式隔離 118
5.2.3 何時(shí)使用Shadow DOM 120
5.3 使用Web Component進(jìn)行組合的優(yōu)缺點(diǎn) 121
5.3.1 優(yōu)點(diǎn) 121
5.3.2 缺點(diǎn) 122
5.3.3 使用客戶端集成的時(shí)機(jī) 122
5.4 本章小結(jié) 123
第6章 通信模式 125
6.1 用戶界面通信 126
6.1.1 父級頁面到片段 127
6.1.2 片段到父級頁面 131
6.1.3 片段到片段 135
6.1.4 使用Broadcast Channel API發(fā)布/訂閱 140
6.1.5 UI通信更適合什么場景 142
6.2 其他通信機(jī)制 143
6.3 本章小結(jié) 148
第7章 客戶端路由和應(yīng)用程序容器 149
7.1 應(yīng)用程序容器中的扁平化路由 1521
7.2 雙層路由的應(yīng)用程序容器 162
7.3 single-spa元框架的簡述 171
7.4 來自統(tǒng)一單頁面應(yīng)用的挑戰(zhàn) 178
7.5 本章小結(jié) 183
第8章 組合和多端渲染 185
8.1 結(jié)合使用服務(wù)端和客戶端組合 187
8.2 何時(shí)適合采用多端組合 195
8.3 本章小結(jié) 197
第9章 適合我們項(xiàng)目的架構(gòu) 199
9.1 復(fù)習(xí)專業(yè)術(shù)語 200
9.2 復(fù)雜度的比較 206
9.3 是構(gòu)建網(wǎng)站還是應(yīng)用程序 208
9.4 選擇正確的架構(gòu)和集成技術(shù) 211
9.5 本章小結(jié) 216
第Ⅲ部分 如何做到快速、一致、有效
第10章 資源加載 221
10.1 資源引用策略 222
10.2 打包粒度 238
10.3 按需加載 241
10.4 本章小結(jié) 242
第11章 至關(guān)重要的性能 243
11.1 高性能架構(gòu)設(shè)計(jì) 244
11.2 精簡并復(fù)用vendor庫 251
11.3 本章小結(jié) 272
第12章 UI設(shè)計(jì)系統(tǒng) 275
12.1 為什么需要一個(gè)設(shè)計(jì)系統(tǒng) 276
12.2 公用設(shè)計(jì)系統(tǒng)與自治團(tuán)隊(duì) 279
12.3 運(yùn)行時(shí)整合與構(gòu)建時(shí)整合 286
12.4 樣式庫中的組件：通用與定制 293
12.5 哪些組件應(yīng)該沉淀到中心化的樣式庫中 298
12.6 本章小結(jié) 303
第13章 團(tuán)隊(duì)及職責(zé)邊界 305
13.1 將系統(tǒng)與團(tuán)隊(duì)對齊 306
13.2 知識分享 314
13.3 橫向共性問題 317
13.4 技術(shù)多樣性 319
13.5 本章小結(jié) 323
第14章 遷移、本地開發(fā)及測試 325
14.1 遷移 326
14.2 本地開發(fā) 333
14.3 測試 339
14.4 本章小結(jié) 341