前言

近來，微前端的概念非常火爆，那么什么是微前端架構(gòu)？微前端架構(gòu)是一種架構(gòu)風(fēng)格類似于微服務(wù)的架構(gòu)，它將微服務(wù)的理念應(yīng)用于瀏覽器端，即將 Web 應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)?strong>多個(gè)小型前端應(yīng)用聚合為一的應(yīng)用。由此帶來的變化是，這些前端應(yīng)用可以獨(dú)立運(yùn)行、獨(dú)立開發(fā)、獨(dú)立部署。微前端所具備的便于引入新框架，代碼簡(jiǎn)潔、易維護(hù)等特點(diǎn)使其應(yīng)用愈發(fā)廣泛。

愛奇藝號(hào)前端工程基于Vue的框架已經(jīng)使用了3年之余，這一版本雖有不錯(cuò)的可擴(kuò)展性，但隨著接入的業(yè)務(wù)越來越多，項(xiàng)目復(fù)雜度和代碼行數(shù)增長(zhǎng)，現(xiàn)有框架需要將框架與業(yè)務(wù)更加的解耦以方便其他團(tuán)隊(duì)進(jìn)行維護(hù)，同時(shí)也需要模塊的獨(dú)立部署、發(fā)布等提高迭代效率。基于種種原因，愛奇藝號(hào)技術(shù)團(tuán)隊(duì)基于Vue定制開發(fā)了微前端框架，此文從偏向?qū)嵺`的方面來簡(jiǎn)要介紹這套框架的實(shí)現(xiàn)原理。

容器應(yīng)用

首先需要一個(gè)容器應(yīng)用，這個(gè)容器應(yīng)用需要有最基本的代碼架構(gòu)，比如Vue、主路由、Vuex及其他基礎(chǔ)的通用代碼，但需要將這些通用代碼中任何業(yè)務(wù)相關(guān)的部分剝離。簡(jiǎn)單來說，容器應(yīng)用是一個(gè)基于Vue的框架，其作用是將其他分散的各個(gè)微前端模塊通過頁面路由攢在一起，再組成一個(gè)個(gè)的頁面。

除了基本的Vue啟動(dòng)應(yīng)用等功能，微前端容器的架構(gòu)邏輯需要做到下面幾點(diǎn)：

1、將微前端模塊需要的通用代碼綁定至全局函數(shù)；

2、基于請(qǐng)求的url獲取相對(duì)應(yīng)的微前端模塊部署的js manifest文件地址列表（列表manifest中包含業(yè)務(wù)自己定義的路由、js模塊的地址列表）；

3、通過匹配微前端模塊中定義的路由獲取頁面所需的微前端模塊；

4、加載每個(gè)微前端模塊的具體js文件地址并將其渲染。

下面我們來依次對(duì)容器應(yīng)用中各個(gè)部分進(jìn)行介紹：

- App.js

這一部分用于進(jìn)行Vue的初始化的相關(guān)邏輯。與正常Vue初始化邏輯相比，這里唯一不同的是需要將一些其他微前端模塊必需的通用組件綁定到全局變量中（此處用window，也可以自己定義一個(gè)全局變量），比如：

· Vue：其他微前端模塊都需要使用容器應(yīng)用提供的Vue包初始化，而非每個(gè)微前端模塊自己在package.json中引入Vue，這樣會(huì)嚴(yán)重增加js包大小，拖累頁面性能；

· Router：為了讓微前端能夠無縫跳轉(zhuǎn)其他頁面，統(tǒng)一使用全局路由，在子模塊中定義的路由將會(huì)在加載頁面時(shí)實(shí)時(shí)合并到主路由中；

· Store：很多不同小模塊、大微前端模塊之間的交互可以使用全局通用的Store；

· RenderPage模塊：給其他微前端模塊路由渲染頁面使用的component（后文會(huì)詳細(xì)講這個(gè)模塊）;

· 其他的一些小模塊，比如用戶信息管理模塊等.

在框架中，為了方便子模塊的運(yùn)行，全部通用組件被綁定到window下，如window.mp.Vue等，這為子模塊按需取用提供便利。

- hosts配置

因微前端容器應(yīng)用中不引用任何子模塊的依賴，需要直接通過正常url訪問獲取子模塊的js代碼，所以容器應(yīng)用需要通過自定義的配置文件來獲得每個(gè)子模塊所在的服務(wù)器host，以便拼湊出需要加載的js具體路徑。每當(dāng)增加一個(gè)新的模塊，就需要在這里添加模塊部署的相應(yīng)地址，否則容器應(yīng)用不會(huì)成功解析。

例如：

配置中可以包含多個(gè)不同服務(wù)器環(huán)境的地址，在不同的環(huán)境中自動(dòng)使用相對(duì)應(yīng)的url。值得注意的是，本地環(huán)境build中使用localhost加port的地址，方便本地啟動(dòng)調(diào)試模塊。本地啟動(dòng)時(shí)，需要將容器應(yīng)用以及全部微前端模塊一起啟動(dòng)，頁面才會(huì)正常運(yùn)行。

- 路由

在微前端中路由實(shí)現(xiàn)分治，即每個(gè)微前端模塊（業(yè)務(wù)）維護(hù)各自的路由，容器應(yīng)用負(fù)責(zé)匹配并拉取即將訪問的頁面相對(duì)應(yīng)的模塊及其路由。在這里我們首先為主容器定義一個(gè)非常寬泛的路由定義，比如path: '*'，然后在路由的鉤子函數(shù)如beforeEach中實(shí)現(xiàn)微前端模塊的路由獲取，并將其添加進(jìn)主路由中。

從子模塊生成的manifest.json（后面微前端模塊部分會(huì)介紹）中獲取子模塊的路由js文件并將其解析，再加入主路由中。經(jīng)過此番操作后，同一個(gè)窗口再次訪問這個(gè)地址時(shí)就會(huì)直接匹配成功主路由了。

- 微前端模塊渲染

容器應(yīng)用中最重要的部分就是如何獲取并渲染微前端模塊。現(xiàn)提供一個(gè)module.vue模塊專門負(fù)責(zé)拉取并渲染微前端模塊，則module.vue需要做的事情如下：

· 定位微前端模塊所在的host并拉取微前端模塊manifest.json列表（在上文介紹的路由中已經(jīng)完成）

· 由于獲取manifest的過程在加載路由時(shí)已經(jīng)完成，因此接下來直接從store中獲取該模塊的js文件url，并將其加載，再插入頁面。此處直接通過往document.head中插入script標(biāo)簽的方法加載模塊，這與加載路由文件的方法一樣，不再贅述

· 執(zhí)行微前端模塊的渲染函數(shù)，最終將其渲染至頁面中。每個(gè)微前端模塊都定義有一個(gè)全局的渲染函數(shù)，比如window.mp.render_home(‘#containerId’)則會(huì)調(diào)用微前端模塊中的Vue實(shí)例化、渲染函數(shù)，這一點(diǎn)會(huì)在后文詳細(xì)講述。這里要注意的是，需要傳入一個(gè)DOM id以便Vue將渲染過的模塊插入頁面對(duì)應(yīng)的位置。

- 通用模塊注冊(cè)為懶加載組件

在業(yè)務(wù)中經(jīng)常會(huì)碰到一些通用的代碼需要被引用，這些代碼如果是兩三行，引用相對(duì)簡(jiǎn)單，但如果是成百上千行或是一個(gè)通用的組件，每個(gè)微前端模塊都通過import引用它，則會(huì)極大增加用戶瀏覽器需要下載并解析的代碼量，拖累頁面性能。所以在容器應(yīng)用中（或者容器應(yīng)用引用的一個(gè)common組件中）需要將重復(fù)引用的代碼注冊(cè)為全局引用的方法。

需要注意的是，以往在Vue中注冊(cè)全局組件往往需要在app.js中import，這會(huì)增加頁面初始化app.js文件的大小，所以為避免這一問題，在注冊(cè)組件時(shí)可以利用webpack的動(dòng)態(tài)加載import的方式進(jìn)行，這樣一來則只有在組件需要的時(shí)候才會(huì)真正引入這個(gè)組件的代碼，而不是直接將其打包進(jìn)app.js中。在import時(shí)加入webpackChunkName的注釋可以起到告訴webpack打包后chunk的文件名的作用。，比如下面引入echarts的方式：

微前端模塊

完整的微前端模塊可以代表一個(gè)單獨(dú)的業(yè)務(wù)，其中可以包括一個(gè)或多個(gè)子模塊，比如一個(gè)關(guān)于收入的微前端模塊，其中包括收入概覽、收入圖表、收入按天列表等多個(gè)子模塊，這就要求每個(gè)微前端模塊都有如下功能：

1、一個(gè)遵循框架規(guī)范的業(yè)務(wù)自己定義的路由。這能給業(yè)務(wù)最大的自由度：上線新頁面而無需部署容器應(yīng)用；

2、每個(gè)需要獨(dú)立出來的模塊的entry文件。Webpack打包時(shí)會(huì)將每一個(gè)entry生成一個(gè)js文件以便單獨(dú)調(diào)用，因?yàn)槊總€(gè)entry js代碼都包含初始化框架的邏輯，所以理論上每個(gè)entry代碼都可以獨(dú)立運(yùn)行；

3、因?yàn)槊看尾渴鸷笏衘s代碼的hash都會(huì)變化，所以微前端模塊需要能夠生成一個(gè)manifest文件列表，包括上面的路由文件以及全部獨(dú)立的模塊js文件的url列表。容器應(yīng)用會(huì)實(shí)時(shí)通過這個(gè)manifest文件獲取最新的js代碼。

下面我們來詳細(xì)介紹微前端模塊的組成：

- webpack相關(guān)配置

微前端模塊的webpack相比主容器，有下面幾點(diǎn)不同：

· 忽略一些第三方包。盡管模塊在package.json中也引用了Vue等第三方包，但在webpack打包時(shí)無法將其包括進(jìn)來，這主要是以下兩點(diǎn)原因：其一，這會(huì)導(dǎo)致js大小以幾十幾百倍增加；其二，Vue等框架代碼完全可以使用主容器已經(jīng)引用了的三方包。所以我們利用webpack的external配置忽略了一些不希望被打包過程包括的代碼：

· 多個(gè)entry。因?yàn)橐粋€(gè)微前端模塊可能會(huì)包括很多個(gè)可單獨(dú)引用的子模塊，每一個(gè)子模塊都單獨(dú)有一個(gè)Vue初始化等功能的js文件（類似主容器的app.js）。在打包過程中，我們加入了掃描全部jobs文件夾下js文件的功能，每一個(gè)js文件都代表了一個(gè)微前端模塊下的子模塊。

· 部署路徑：因?yàn)槊恳粋€(gè)微前端模塊都需要與其他微前端模塊部署到不同的服務(wù)器位置，所以在webpack打包部署時(shí)需要單獨(dú)配置。開發(fā)環(huán)境下可以直接使用localhost加不同的端口port，線上環(huán)境可根據(jù)實(shí)際情況進(jìn)行配置。

· manifest：我們通過webpack-manifest-plugin來在打包時(shí)自動(dòng)生成一個(gè)列表文件。這樣每次訪問到微前端模塊時(shí)都能通過這個(gè)文件獲取到最新上線的js代碼文件。

- 路由

一個(gè)微前端模塊可能代表了一個(gè)業(yè)務(wù)，而每個(gè)業(yè)務(wù)可能會(huì)頻繁變化路由配置，所以如果路由分配能由業(yè)務(wù)微前端模塊自行配置，不同團(tuán)隊(duì)則能更方便的進(jìn)行更改而不需要重新上線容器應(yīng)用。上文已經(jīng)介紹了主容器如何獲取并使用微前端中的路由配置，這里詳細(xì)介紹模塊中如何配置自己的路由。

在jobs/routes.js中，我們綁定一個(gè)全局函數(shù)用來讓主容器獲取到我們自己配置的路由信息，類似下面的代碼jobs/route.js：

可見，子模塊的路由完全遵循Vue的路由規(guī)范（或遵循自身使用的框架的規(guī)范），這樣可以讓容器應(yīng)用毫不費(fèi)力地直接添加引用。容器應(yīng)用加載完成js文件后，可以直接調(diào)用window.mp.home_routes()獲來取已定義好的ROUTES配置。

- 子模塊的entry文件（jobs/*.js）

每一個(gè)子模塊都需要一個(gè)單獨(dú)的entry文件，這類似于主容器的jobs/app.js，能用于初始化子模塊代碼、綁定全局渲染函數(shù)等。entry文件與正常的初始化Vue方式一樣，只是需要將初始化邏輯包裹在一個(gè)全局函數(shù)中，以便主容器能在加載此模塊js完畢后，方便的進(jìn)行渲染調(diào)用。例如：

根據(jù)以上代碼，渲染出來的Vue模塊會(huì)被放到指定的#${containerId}中，這個(gè)ID由主容器在渲染時(shí)動(dòng)態(tài)傳入，以便將模塊插入到指定的頁面位置。

- 子模塊代碼開發(fā)

子模塊代碼開發(fā)與正常的Vue開發(fā)并無不同，可以輕松遷移老代碼，只需要注意一些通用代碼的引用并通過上文提到的懶加載模式引入。

后記

愛奇藝號(hào)技術(shù)團(tuán)隊(duì)基于Vue定制開發(fā)了微前端框架，通過應(yīng)用上面介紹的基本方法及其他的自定義邏輯，我們搭建了與業(yè)務(wù)代碼開發(fā)、代碼迭代非常契合的一套微前端框架。我們認(rèn)為微前端的主要好處有：

· 更小，更緊密且更易維護(hù)的代碼庫(kù)。

· 組織更具擴(kuò)展能力，團(tuán)隊(duì)可更加獨(dú)立自治。

未來，我們會(huì)繼續(xù)完善前端框架，使其性能更加優(yōu)秀，進(jìn)一步提升愛奇藝號(hào)前端代碼的開發(fā)效率，實(shí)現(xiàn)不同應(yīng)用之間頁面級(jí)別的自由組合，從而可生成個(gè)性化控制臺(tái)。

實(shí)現(xiàn)微前端有很多技術(shù)方法，不同的企業(yè)有不同的對(duì)策；從服務(wù)端轉(zhuǎn)換到 iframe 和 JAVAScript 元框架和 Web 組件等都是可選的微前端方案。

感興趣的朋友可以閱讀實(shí)現(xiàn)微前端的技術(shù)方法：https://medium.com/dazn-tech/adopting-a-micro-frontends-architecture-e283e6a3c4f3