大型 SPA 項(xiàng)目架構(gòu)設(shè)計(jì)與重構(gòu)

本文主要為分享我司?控制臺(tái)^[1]?最近兩年的架構(gòu)演進(jìn)，遇到的問題和解決方案等。控制臺(tái)項(xiàng)目包含近百個(gè)不同產(chǎn)品，跨部門、跨地域協(xié)作開發(fā)，是一個(gè)比較典型的大型 SPA 前端項(xiàng)目。

先說下為何要做架構(gòu)重構(gòu)，老架構(gòu)以及老架構(gòu)下的一些問題。

老架構(gòu)介紹

控制臺(tái)老架構(gòu)底層為?angular@1，使用?angular?的?ui-router?和?lazy-load?來進(jìn)行項(xiàng)目的按需加載運(yùn)行。大部分項(xiàng)目通過?angular?掛載?react?實(shí)例，雖然很多業(yè)務(wù)代碼和?angular?無關(guān)，但是依然有很多地方（如 services、路由等）依賴?angular。

老架構(gòu)存在的問題

老架構(gòu)存在的問題主要分為兩部分，運(yùn)行時(shí)問題和開發(fā)時(shí)問題：

運(yùn)行時(shí)問題

老架構(gòu)嚴(yán)重依賴 angular

由于當(dāng)初整套架構(gòu)設(shè)計(jì)基于?angular?的能力，導(dǎo)致啟動(dòng)器體量大、加載慢、性能差。

老架構(gòu)下的依賴體量重

老架構(gòu)下公共部分主要分為?common?和?components，里面存在大量的歷史遺留、冗余、無效代碼，歷史包袱重，而且依賴混亂，無法安全清理。

耦合嚴(yán)重

老架構(gòu)下的項(xiàng)目，雖然大部分項(xiàng)目代碼已經(jīng)都是?react?代碼，但是有一些?services?依然依賴?angular。啟動(dòng)器、公共依賴、項(xiàng)目間的代碼耦合嚴(yán)重。

性能問題

啟動(dòng)器重、依賴重、語言文件混合導(dǎo)致過大、初始化內(nèi)容過多等各種問題導(dǎo)致項(xiàng)目加載慢、執(zhí)行慢。

開發(fā)時(shí)問題

使用麻煩、風(fēng)險(xiǎn)高

老架構(gòu)的項(xiàng)目結(jié)構(gòu)為一個(gè)主項(xiàng)目和 N 個(gè)子項(xiàng)目，主項(xiàng)目中包含著開發(fā)腳本、開發(fā)依賴，其它的項(xiàng)目如依賴、啟動(dòng)器、項(xiàng)目均作為子模塊（git submodule）管理。

開發(fā)時(shí)需要檢查主倉庫更新，檢查依賴更新，執(zhí)行開發(fā)腳本，還需注意啟動(dòng)器項(xiàng)目的版本、沖突、依賴更新等，使用成本高。

升級(jí)成本高

開發(fā)環(huán)境無法安全升級(jí)，由于所以依賴、腳本都是全項(xiàng)目共享，升級(jí)會(huì)直接影響到上百個(gè)子項(xiàng)目，導(dǎo)致不能隨意變動(dòng)。

新架構(gòu)

控制臺(tái)項(xiàng)目分三層，啟動(dòng)器、公共模塊、業(yè)務(wù)模塊。

啟動(dòng)器

啟動(dòng)的承載著網(wǎng)站最基本的功能，包括：

• 骨架屏
• 瀏覽器兼容處理 - 不兼容版本提示
• 項(xiàng)目路由管理（router-service） - 跨項(xiàng)目跳轉(zhuǎn)
• 項(xiàng)目加載/掛載/卸載（微前端?rapiop^[2]）
• 模塊管理器（mod^[3]）
• 主題 - 主題加載/切換
• 基礎(chǔ)依賴 -?babel polyfill、reset-style
• sentry?- 錯(cuò)誤上報(bào)
• matomo?- 用戶行為分析、數(shù)據(jù)上報(bào)
• 其它的一些內(nèi)部服務(wù)等

公共模塊

services

services?為內(nèi)部的一些公共服務(wù)。

• user?- 用戶信息
• intl?- 語言翻譯
• das?- 數(shù)據(jù)上報(bào)
• region、project?等

libs

libs?用于輸出一些常用的公共模塊、開源庫。

• react、react-dom、react-router?-?react?相關(guān)庫
• components^[4]?- 公共組件庫
• apexcharts、react-apexcharts?- 圖標(biāo)庫
• lodash?等工具庫

components

components?包括控制臺(tái)相關(guān)的一些業(yè)務(wù)組件

• common-components?- 常用的業(yè)務(wù)組件、布局、路由組件等
• umon-components?- 監(jiān)控相關(guān)組件
• code-components?- 代碼編輯器組件
• ulog-components、pay-components?等

其它模塊

• sidebar、navbar?- 公共部分的 UI
• styles?- 通用的樣式
• react-adapter?- 項(xiàng)目適配器，減少樣板代碼（注冊(cè)微前端、初始化語言、依賴加載等）

業(yè)務(wù)模塊

業(yè)務(wù)模塊主要為各業(yè)務(wù)項(xiàng)目，分為老項(xiàng)目、新項(xiàng)目。

優(yōu)化后

• 輕量無依賴啟動(dòng)器
• 職責(zé)明確
• 模塊拆分、自治^[5]、依賴明確
• 無耦合

運(yùn)行流程

進(jìn)入頁面：

• 瀏覽器兼容檢測(cè)，polyfill、基本依賴加載
• reset?樣式加載，主題、matomo、sentry?初始化
• 灰度信息獲取，未登陸則跳回登陸
• 使用灰度信息初始化微前端、模塊管理器
• 根據(jù)當(dāng)前?url?匹配項(xiàng)目，如果為老項(xiàng)目則加載老啟動(dòng)器，進(jìn)入老項(xiàng)目加載流程，新項(xiàng)目直接加載項(xiàng)目、依賴

開發(fā)

開發(fā)環(huán)境拆分為兩部分：CLI?和?dev-dependences。

CLI

提供?CLI?工具，提供開發(fā)、構(gòu)建、打包分析、codemod、依賴管理等功能。

dev-dependences

包含了項(xiàng)目的開發(fā)依賴：webpack、eslint、loaders?等，存在多版本，可方便后續(xù)的升級(jí)迭代，降低升級(jí)成本和風(fēng)險(xiǎn)。

提供依賴對(duì)應(yīng)的功能腳本：開發(fā)、構(gòu)建等。

開發(fā)啟動(dòng)

通過?CLI?啟動(dòng)開發(fā)命令，會(huì)根據(jù)命令啟動(dòng)啟動(dòng)器（線上/預(yù)發(fā)步/本地），啟動(dòng)指定項(xiàng)目中的開發(fā)依賴中的開發(fā)腳本并通信，合并線上灰度信息和本地文件信息。

優(yōu)勢(shì)

• 升級(jí)維護(hù)安全
• 使用方便

現(xiàn)狀

目前處于新架構(gòu)老架構(gòu)共存的狀態(tài)，大部分的老項(xiàng)目在逐漸替換舊的 services 等，進(jìn)行平滑升級(jí)。