隨著互聯(lián)網(wǎng)行業(yè)的快速發(fā)展，前端應(yīng)用的規(guī)模和復(fù)雜度也在不斷增加。為了應(yīng)對(duì)這種挑戰(zhàn)，越來(lái)越多的企業(yè)和開(kāi)發(fā)者開(kāi)始探索新的前端架構(gòu)模式。微前端作為一種新興的前端架構(gòu)模式，憑借其高度模塊化、獨(dú)立部署、易于擴(kuò)展等特點(diǎn)，逐漸成為了業(yè)界的熱門(mén)話題。本文將通過(guò)一個(gè)實(shí)際案例，詳細(xì)介紹微前端的概念、原理以及在實(shí)戰(zhàn)中的應(yīng)用。

一、微前端簡(jiǎn)介

微前端（Micro Frontends）是一種將大型單頁(yè)應(yīng)用拆分為多個(gè)獨(dú)立的小型應(yīng)用的技術(shù)方案。每個(gè)小型應(yīng)用都可以獨(dú)立開(kāi)發(fā)、部署和運(yùn)行，它們之間通過(guò)共享公共資源（如樣式、組件等）來(lái)實(shí)現(xiàn)數(shù)據(jù)和狀態(tài)的同步。微前端的核心思想是將前端應(yīng)用分解為一組可獨(dú)立維護(hù)、獨(dú)立部署的子應(yīng)用，從而提高開(kāi)發(fā)效率、降低維護(hù)成本，同時(shí)保證系統(tǒng)的靈活性和可擴(kuò)展性。

二、微前端的優(yōu)勢(shì)

1. 高度模塊化

微前端將大型應(yīng)用拆分為多個(gè)小型應(yīng)用，每個(gè)應(yīng)用負(fù)責(zé)一個(gè)特定的功能或模塊。這種模塊化的設(shè)計(jì)使得開(kāi)發(fā)者可以更加專注于某個(gè)功能的開(kāi)發(fā)，提高開(kāi)發(fā)效率。

2. 獨(dú)立部署

每個(gè)微應(yīng)用都可以獨(dú)立部署，無(wú)需對(duì)整個(gè)應(yīng)用進(jìn)行整體部署。這大大簡(jiǎn)化了部署過(guò)程，降低了部署風(fēng)險(xiǎn)。

3. 易于擴(kuò)展

當(dāng)需要添加新功能時(shí)，只需開(kāi)發(fā)一個(gè)新的微應(yīng)用并將其集成到主應(yīng)用中，而無(wú)需修改現(xiàn)有的代碼。這使得系統(tǒng)具有良好的可擴(kuò)展性。

4. 技術(shù)棧無(wú)關(guān)

微前端允許每個(gè)微應(yīng)用使用不同的技術(shù)棧，這為團(tuán)隊(duì)提供了更大的技術(shù)選擇空間，同時(shí)也降低了技術(shù)選型的風(fēng)險(xiǎn)。

5. 獨(dú)立升級(jí)

當(dāng)某個(gè)微應(yīng)用需要升級(jí)時(shí)，只需對(duì)該應(yīng)用進(jìn)行升級(jí)，而不會(huì)影響其他應(yīng)用。這有助于保持整個(gè)系統(tǒng)的穩(wěn)定和可靠。

三、微前端的原理

微前端的核心原理是通過(guò)定義一個(gè)容器來(lái)承載多個(gè)獨(dú)立的微應(yīng)用。這個(gè)容器負(fù)責(zé)管理各個(gè)微應(yīng)用之間的通信和資源共享。具體來(lái)說(shuō)，微前端主要包括以下幾個(gè)部分：

1. 主應(yīng)用：主應(yīng)用是整個(gè)系統(tǒng)的入口，它負(fù)責(zé)加載和管理各個(gè)微應(yīng)用。主應(yīng)用通常包含一個(gè)容器元素，用于承載各個(gè)微應(yīng)用的內(nèi)容。此外，主應(yīng)用還需要提供一些基礎(chǔ)設(shè)施服務(wù)，如路由管理、狀態(tài)管理等。

2. 微應(yīng)用：微應(yīng)用是主應(yīng)用中的一個(gè)子應(yīng)用，它可以獨(dú)立開(kāi)發(fā)、部署和運(yùn)行。每個(gè)微應(yīng)用都包含一個(gè)容器元素，用于承載該應(yīng)用的內(nèi)容。此外，微應(yīng)用還需要提供一些與主應(yīng)用交互的接口，如共享資源、通信等。

3. 通信機(jī)制：微前端需要實(shí)現(xiàn)各個(gè)微應(yīng)用之間的通信和資源共享。這通常通過(guò)定義一套統(tǒng)一的通信協(xié)議和API來(lái)實(shí)現(xiàn)。例如，可以使用自定義事件、消息隊(duì)列等方式來(lái)實(shí)現(xiàn)微應(yīng)用之間的通信；可以使用Webpack、Rollup等打包工具來(lái)實(shí)現(xiàn)資源的共享和提取。

四、微前端案例思路

下面我們通過(guò)一個(gè)簡(jiǎn)單的案例思路來(lái)模擬如何使用微前端技術(shù)構(gòu)建一個(gè)高效的前端應(yīng)用。假設(shè)我們要開(kāi)發(fā)一個(gè)包含多個(gè)子功能的在線教育平臺(tái)，如課程管理、在線考試、學(xué)習(xí)社區(qū)等。我們可以采用以下步驟來(lái)實(shí)現(xiàn)這個(gè)系統(tǒng)：

1. 拆分功能模塊：首先，我們需要將整個(gè)在線教育平臺(tái)拆分為多個(gè)獨(dú)立的功能模塊，如課程管理模塊、在線考試模塊、學(xué)習(xí)社區(qū)模塊等。每個(gè)模塊都可以作為一個(gè)獨(dú)立的微應(yīng)用進(jìn)行開(kāi)發(fā)和維護(hù)。

2. 設(shè)計(jì)通信協(xié)議：為了實(shí)現(xiàn)各個(gè)微應(yīng)用之間的通信和資源共享，我們需要設(shè)計(jì)一套統(tǒng)一的通信協(xié)議和API。例如，我們可以定義一個(gè)emit方法來(lái)觸發(fā)自定義事件，以及一個(gè)on方法來(lái)監(jiān)聽(tīng)自定義事件；我們還可以使用Webpack的CommonsChunkPlugin插件來(lái)實(shí)現(xiàn)公共資源的提取和共享。

3. 開(kāi)發(fā)主應(yīng)用：主應(yīng)用是整個(gè)在線教育平臺(tái)的入口，它負(fù)責(zé)加載和管理各個(gè)微應(yīng)用。主應(yīng)用需要提供一個(gè)容器元素來(lái)承載各個(gè)微應(yīng)用的內(nèi)容，并提供一些基礎(chǔ)設(shè)施服務(wù)，如路由管理、狀態(tài)管理等。此外，主應(yīng)用還需要實(shí)現(xiàn)與各個(gè)微應(yīng)用的通信和資源共享。

4. 開(kāi)發(fā)微應(yīng)用：每個(gè)微應(yīng)用都是一個(gè)獨(dú)立的功能模塊，它可以獨(dú)立開(kāi)發(fā)、部署和運(yùn)行。每個(gè)微應(yīng)用都需要提供一個(gè)容器元素來(lái)承載該應(yīng)用的內(nèi)容，并提供一些與主應(yīng)用交互的接口，如共享資源、通信等。此外，微應(yīng)用還需要實(shí)現(xiàn)自身的業(yè)務(wù)邏輯和界面展示。

5. 集成測(cè)試：在完成各個(gè)微應(yīng)用的開(kāi)發(fā)后，我們需要對(duì)整個(gè)系統(tǒng)進(jìn)行集成測(cè)試，確保各個(gè)微應(yīng)用之間的通信和資源共享正常工作。此外，我們還需要對(duì)整個(gè)系統(tǒng)的性能、穩(wěn)定性等進(jìn)行測(cè)試和優(yōu)化。

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

編輯推薦

就像微服務(wù)為后端系統(tǒng)帶來(lái)了靈活性和可維護(hù)性，微前端也為基于瀏覽器的應(yīng)用程序提供了同樣的優(yōu)勢(shì)。你可以將項(xiàng)目設(shè)計(jì)為包含多個(gè)單獨(dú)的組件，每個(gè)組件中包括各自的接口、邏輯和存儲(chǔ)功能，這樣就可以獨(dú)立開(kāi)發(fā)這些組件，并在瀏覽器中組合使用它們。

《微前端實(shí)戰(zhàn)》一書(shū)指導(dǎo)讀者將微服務(wù)方法應(yīng)用于前端領(lǐng)域。本書(shū)首先會(huì)介紹微前端的核心設(shè)計(jì)思想，之后你將親手創(chuàng)建一個(gè)電商應(yīng)用程序，并在開(kāi)發(fā)過(guò)程中處理一些實(shí)際問(wèn)題，如服務(wù)端組合和客戶端組合、路由、確保外觀和交互的一致性等。最終，你將深入了解團(tuán)隊(duì)工作流模式，這種模式能夠化地突顯獨(dú)立開(kāi)發(fā)應(yīng)用程序組件的優(yōu)勢(shì)。

內(nèi)容簡(jiǎn)介

• 將多個(gè)獨(dú)立的應(yīng)用程序組合成一個(gè)統(tǒng)一的前端應(yīng)用程序

• 將基于不同框架的代碼組合在一起

• 瀏覽器端組合、服務(wù)端組合以及路由

• 高效的開(kāi)發(fā)團(tuán)隊(duì)實(shí)踐和項(xiàng)目工作流

作者簡(jiǎn)介

Michael Geers是一名軟件開(kāi)發(fā)者，專注于用戶界面相關(guān)開(kāi)發(fā)領(lǐng)域。他從十幾歲起就開(kāi)始為網(wǎng)站開(kāi)發(fā)軟件。在過(guò)去的幾年里，他參與過(guò)多個(gè)垂直架構(gòu)的項(xiàng)目，在多個(gè)國(guó)際性會(huì)議上分享了自己的經(jīng)驗(yàn)，并在雜志上發(fā)表了一系列相關(guān)的文章。目前，他仍在持續(xù)運(yùn)營(yíng)https://micro-frontends.org站點(diǎ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 微前端解決了哪些問(wèn)題 14

1.2.1 優(yōu)化功能開(kāi)發(fā) 14

1.2.2 不再有前端巨石架構(gòu) 15

1.2.3 適應(yīng)變化 16

1.2.4 自主的優(yōu)勢(shì) 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 效率與開(kāi)銷 24

1.4.4 微前端不適用的場(chǎng)景 25

1.4.5 誰(shuí)在使用微前端 26

1.5 本章小結(jié) 26

第2章 我的第一個(gè)微前端項(xiàng)目 29

2.1 The Tractor Store簡(jiǎn)介 30

2.1.1 準(zhǔn)備開(kāi)始 30

2.1.2 運(yùn)行書(shū)中的示例代碼 32

2.2 通過(guò)鏈接進(jìn)行頁(yè)面跳轉(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 通過(guò)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 通過(guò)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 通過(guò)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 通過(guò)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 父級(jí)頁(yè)面到片段 127

6.1.2 片段到父級(jí)頁(yè)面 131

6.1.3 片段到片段 135

6.1.4 使用Broadcast Channel API發(fā)布/訂閱 140

6.1.5 UI通信更適合什么場(chǎng)景 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元框架的簡(jiǎn)述 171

7.4 來(lái)自統(tǒng)一單頁(yè)面應(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ù)語(yǔ) 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 精簡(jiǎn)并復(fù)用vendor庫(kù) 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 樣式庫(kù)中的組件：通用與定制 293

12.5 哪些組件應(yīng)該沉淀到中心化的樣式庫(kù)中 298

12.6 本章小結(jié) 303

第13章 團(tuán)隊(duì)及職責(zé)邊界 305

13.1 將系統(tǒng)與團(tuán)隊(duì)對(duì)齊 306

13.2 知識(shí)分享 314

13.3 橫向共性問(wèn)題 317

13.4 技術(shù)多樣性 319

13.5 本章小結(jié) 323

第14章 遷移、本地開(kāi)發(fā)及測(cè)試 325

14.1 遷移 326

14.2 本地開(kāi)發(fā) 333

14.3 測(cè)試 339

14.4 本章小結(jié) 341

前言/序言

我是一名有著20年經(jīng)驗(yàn)的Web開(kāi)發(fā)人員。在這20年中，我參與了各種規(guī)模的項(xiàng)目，其中包括獨(dú)自一人開(kāi)發(fā)的微型創(chuàng)業(yè)項(xiàng)目，與其他幾位同伴一同完成的小型項(xiàng)目，也參與過(guò)多人合作的大型項(xiàng)目(人數(shù)肯定超過(guò)了我家餐桌旁擺放的椅子數(shù)量)。

2014年，我和neuland Büro für Informatik的同事們負(fù)責(zé)為一家連鎖百貨公司重建電子商務(wù)系統(tǒng)。其現(xiàn)有的電子商務(wù)系統(tǒng)不僅存在性能問(wèn)題，而且結(jié)構(gòu)非常混亂，在其基礎(chǔ)上開(kāi)發(fā)新的功能需要耗費(fèi)很長(zhǎng)時(shí)間，通常還會(huì)引發(fā)系統(tǒng)其他功能的故障。隨著相關(guān)開(kāi)發(fā)團(tuán)隊(duì)規(guī)模的逐漸擴(kuò)大，系統(tǒng)愈發(fā)難以維護(hù)?？蛻粢笮碌南到y(tǒng)除了具有更加合理的架構(gòu)外，還希望在此架構(gòu)上，不同的開(kāi)發(fā)團(tuán)隊(duì)能夠獨(dú)立開(kāi)展工作，互不影響。這種并行開(kāi)發(fā)的能力，對(duì)于客戶以信息化為基礎(chǔ)快速擴(kuò)張業(yè)務(wù)的計(jì)劃，有著至關(guān)重要的意義。為此，我們選擇了一種“垂直化”的系統(tǒng)架構(gòu)：按照職能劃分，設(shè)立多個(gè)獨(dú)立的團(tuán)隊(duì)，每個(gè)團(tuán)隊(duì)專門(mén)負(fù)責(zé)一塊特定業(yè)務(wù)的開(kāi)發(fā)，包括從數(shù)據(jù)庫(kù)到前端頁(yè)面展示的所有工作。這樣每個(gè)團(tuán)隊(duì)所負(fù)責(zé)開(kāi)發(fā)的部分都是獨(dú)立和自治的，最終會(huì)在前端頁(yè)面層面整合在一起。從概念上來(lái)看，前端整合似乎沒(méi)有什么難度，但事實(shí)上我們需要掌握大量的知識(shí)才能有效地實(shí)現(xiàn)前端整合。隨著項(xiàng)目的深入，我們逐步完善了所采用的技術(shù)，并從實(shí)踐中總結(jié)了大量經(jīng)驗(yàn)。

與此同時(shí)，其他公司也在采用類似的技術(shù)方案。然而業(yè)界對(duì)這種方案沒(méi)有一個(gè)統(tǒng)一的命名。每當(dāng)我想通過(guò)搜索引擎了解多個(gè)獨(dú)立且自治的團(tuán)隊(duì)在共同完成一個(gè)Web應(yīng)用程序所面臨的挑戰(zhàn)時(shí)，總是無(wú)法找到合適的搜索詞來(lái)恰當(dāng)?shù)孛枋鑫业囊鈭D。在2016年11月，ThoughtWorks Technology Radar將這種技術(shù)方案命名為“微前端”，這一術(shù)語(yǔ)的出現(xiàn)更加便于大家在開(kāi)發(fā)社區(qū)中圍繞一致的技術(shù)架構(gòu)分享最佳實(shí)踐、技術(shù)和工具。

在2017年的夏天，我抽空對(duì)實(shí)踐中的一些經(jīng)驗(yàn)進(jìn)行了總結(jié)。將所使用的技術(shù)凝結(jié)為獨(dú)立的示例項(xiàng)目，并發(fā)布到https://micro-frontends.org上。從那時(shí)起，情況發(fā)生了一些變化，我被邀請(qǐng)?jiān)诟鞣N會(huì)議上發(fā)言，也收到了許多雜志社的約稿。社區(qū)中的開(kāi)發(fā)人員還將網(wǎng)站翻譯成各種語(yǔ)言。

最重要的是，去年年初，Manning出版社的Nicole和Brian找到了我。他們邀請(qǐng)我寫(xiě)一本關(guān)于微前端的書(shū)。收到邀請(qǐng)時(shí)我首先想到的是：“這有點(diǎn)離譜，我可不是一名作家！我甚至不喜歡閱讀文字，而更喜歡傾聽(tīng)、編寫(xiě)代碼、搭建系統(tǒng)以及解決問(wèn)題”。但這看起來(lái)又是一個(gè)千載難逢的機(jī)會(huì)，在給出答復(fù)之前我經(jīng)過(guò)了慎重考慮，并與家人和朋友討論了多次。最后我決定抓住機(jī)會(huì)，接受這個(gè)邀請(qǐng)。畢竟，我非常喜歡表達(dá)和闡述。將思考總結(jié)成書(shū)，以圖(我非常喜歡圖)和代碼示例的方式呈現(xiàn)，對(duì)我來(lái)說(shuō)也是一種挑戰(zhàn)，在整個(gè)過(guò)程中我也能學(xué)到很多東西?；仡櫨帉?xiě)本書(shū)的歷程，我很滿意當(dāng)初的決定，以及這個(gè)決定的最終產(chǎn)物，也就是各位現(xiàn)在看到的這本書(shū)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-753748.html

到了這里，關(guān)于微前端實(shí)戰(zhàn)：打造高效、靈活的前端應(yīng)用架構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！