也許這才是你想要的微前端方案
前言
微前端是當(dāng)下的前端熱詞，稍具規(guī)模的團(tuán)隊(duì)都會(huì)去做技術(shù)探索，作為一個(gè)不甘落后的團(tuán)隊(duì)，我們也去做了。也許你看過了Single-Spa，qiankun這些業(yè)界成熟方案，非常強(qiáng)大：JS沙箱隔離、多棧支持、子應(yīng)用并行、子應(yīng)用嵌套，但仔細(xì)想想它真的適合你嗎？
對(duì)于我來說，太重了，概念太多，理解困難。先說一下背景，我們之所以要對(duì)我司的小貸管理后臺(tái)做微前端改造，主要基于以下幾個(gè)述求：
- 系統(tǒng)從接手時(shí)差不多30個(gè)頁面，一年多時(shí)間，發(fā)展到目前150多個(gè)頁面，并還在持續(xù)增長;
- 項(xiàng)目體積變大，帶來開發(fā)體驗(yàn)很差，打包構(gòu)建速度很慢(初次構(gòu)建，1分鐘以上)；
- 小貸系統(tǒng)開發(fā)量占整個(gè)web組50%的人力，每個(gè)迭代都有兩三個(gè)需求在這一個(gè)系統(tǒng)上開發(fā)，代碼合并沖突，上線時(shí)間交叉。帶來的是開發(fā)流程管理復(fù)雜；
- 業(yè)務(wù)人員是分類的，沒有誰會(huì)用到所有的功能，每個(gè)業(yè)務(wù)人員只擁有其中30%甚至更少的功能。但不得不加載所有業(yè)務(wù)代碼，才能看到自己想要的頁面；
所以和市面上很多前端團(tuán)隊(duì)引入微前端的目的不同的是，我們是拆，而更多的團(tuán)隊(duì)是合。所以本方案適合和我目的一致的前端團(tuán)隊(duì)，將自己維護(hù)的巨嬰系統(tǒng)瓦解，然后通過微前端"框架"來聚合，降低項(xiàng)目管理難度，提升開發(fā)體驗(yàn)與業(yè)務(wù)使用體驗(yàn)。
巨嬰系統(tǒng)技術(shù)棧： Dva + Antd
方案參考美團(tuán)一篇文章：微前端在美團(tuán)外賣的實(shí)踐
在做這個(gè)項(xiàng)目的按需提前加載設(shè)計(jì)時(shí)，自己去深究過webpack構(gòu)建出的項(xiàng)目代碼運(yùn)行邏輯，收獲比較多：webpack 打包的代碼怎么在瀏覽器跑起來的？, 不了解的可以看看
方案設(shè)計(jì)
基于業(yè)務(wù)角色，我們將巨嬰系統(tǒng)拆成了一個(gè)基座系統(tǒng)和四個(gè)子系統(tǒng)（可以按需擴(kuò)展子系統(tǒng)），如下圖所示：
基座系統(tǒng)除了提供基座功能，即系統(tǒng)的登錄、權(quán)限獲取、子系統(tǒng)的加載、公共組件共享、公共庫的共享，還提供了一個(gè)基本所有業(yè)務(wù)人員都會(huì)使用的業(yè)務(wù)功能：用戶授(guan)信(li)。
子系統(tǒng)以靜態(tài)資源的方式，提供一個(gè)注冊函數(shù)，函數(shù)返回值是一個(gè)Switch包裹的組件與子系統(tǒng)所有的models。
路由設(shè)計(jì)
子系統(tǒng)以組件的形式加載到基座系統(tǒng)中，所以路由是入口，也是整個(gè)設(shè)計(jì)的第一步，為了區(qū)分基座系統(tǒng)頁面和子系統(tǒng)頁面，在路由上約定了下面這種形式：
- // 子系統(tǒng)路由匹配，偽代碼
- function Layout(layoutProps) {
- useEffect(() => {
- const apps = getIncludeSubAppMap();
- // 按需加載子項(xiàng)目；
- apps.forEach(subKey => startAsyncSubapp(subKey));
- }, []);
- return (
- <HLayout {...props}>
- <Switch>
- {/* 企業(yè)用戶管理 */}
- <Route exact path={Paths.PRODUCT_WHITEBAR} component={pages.ProductManage} breadcrumbName="企業(yè)用戶管理" />
- {/* ...省略一百行 */}
- <Route path="/subPage/" component={pages.AsyncComponent} />
- </Switch>
- </HLayout>
- }
即只要以subPage路徑開頭，就默認(rèn)這個(gè)路由對(duì)應(yīng)的組件為子項(xiàng)目，從而通過AsyncComponent組件去異步獲取子項(xiàng)目組件。
異步加載組件設(shè)計(jì)
路由設(shè)計(jì)完了，然后異步加載組件就是這個(gè)方案的靈魂了，流程是這樣的：
- 通過路由，匹配到要訪問的具體是那個(gè)子項(xiàng)目；
- 通過子項(xiàng)目id，獲取對(duì)應(yīng)的manifest.json文件；
- 通過獲取manifest.json，識(shí)別到對(duì)應(yīng)的靜態(tài)資源(js，css)
- 加載靜態(tài)資源，加載完，子項(xiàng)目執(zhí)行注冊
- 動(dòng)態(tài)加載model，更新子項(xiàng)目組件
直接上代碼吧，簡單明了，資源加載的邏輯后面再詳講，需要注意的是model和component的加載順序：
- export default function AsyncComponent({ location }) {
- // 子工程資源是否加載完成
- const [ayncLoading, setAyncLoaded] = useState(true);
- // 子工程組件加載存取
- const [ayncComponent, setAyncComponent] = useState(null);
- const { pathname } = location;
- // 取路徑中標(biāo)識(shí)子工程前綴的部分, 例如 '/subPage/xxx/home' 其中xxx即子系統(tǒng)路由標(biāo)識(shí)
- const id = pathname.split('/')[2];
- useEffect(() => {
- if (!subAppMapInfo[id]) {
- // 不存在這個(gè)子系統(tǒng)，直接重定向到首頁去
- goBackToIndex();
- }
- const status = subAppRegisterStatus[id];
- if (status !== 'finish') {
- // 加載子項(xiàng)目
- loadAsyncSubapp(id).then(({ routes, models }) => {
- loadModule(id, models);
- setAyncComponent(routes);
- setAyncLoaded(false);
- // 已經(jīng)加載過的，做個(gè)標(biāo)記
- subAppRegisterStatus[id] = 'finish';
- }).catch((error = {}) => {
- // 如果加載失敗，顯示錯(cuò)誤信息
- setAyncLoaded(false);
- setAyncComponent(
- <div style={{
- margin: '100px auto',
- textAlign: 'center',
- color: 'red',
- fontSize: '20px'
- }}
- >
- {error.message || '加載失敗'}
- </div>);
- });
- } else {
- const models = subappModels[id];
- loadModule(id, models);
- // 如果能匹配上前綴則加載相應(yīng)子工程模塊
- setAyncLoaded(false);
- setAyncComponent(subappRoutes[id]);
- }
- }, [id]);
- return (
- <Spin spinning={ayncLoading} style={{ width: '100%', minHeight: '100%' }}>
- {ayncComponent}
- </Spin>
- );
- }
子項(xiàng)目設(shè)計(jì)
子項(xiàng)目以靜態(tài)資源的形式在基座項(xiàng)目中加載，需要暴露出子系統(tǒng)自己的全部頁面組件和數(shù)據(jù)model；然后在打包構(gòu)建上和以前也稍許不同，需要多生成一個(gè)manifest.json來搜集子項(xiàng)目的靜態(tài)資源信息。
子項(xiàng)目暴露出自己自愿的代碼長這樣：
- // 子項(xiàng)目資源輸出代碼
- import routes from './layouts';
- const models = {};
- function importAll(r) {
- r.keys().forEach(key => models[key] = r(key).default);
- }
- // 搜集所有頁面的model
- importAll(require.context('./pages', true, /model\.js$/));
- function registerApp(dep) {
- return {
- routes, // 子工程路由組件
- models, // 子工程數(shù)據(jù)模型集合
- };
- }
- // 數(shù)組第一個(gè)參數(shù)為子項(xiàng)目id，第二個(gè)參數(shù)為子項(xiàng)目模塊獲取函數(shù)
- (window["registerApp"] = window["registerApp"] || []).push(['collection', registerApp]);
子項(xiàng)目頁面組件搜集：
- import menus from 'configs/menus';
- import { Switch, Redirect, Route } from 'react-router-dom';
- import pages from 'pages';
- function flattenMenu(menus) {
- const result = [];
- menus.forEach((menu) => {
- if (menu.children) {
- result.push(...flattenMenu(menu.children));
- } else {
- menu.Component = pages[menu.component];
- result.push(menu);
- }
- });
- return result;
- }
- // 子項(xiàng)目自己路徑分別 + /subpage/xxx
- const prefixRoutes = flattenMenu(menus);
- export default (
- <Switch>
- {prefixRoutes.map(child =>
- <Route
- exact
- key={child.key}
- path={child.path}
- component={child.Component}
- breadcrumbName={child.title}
- />
- )}
- <Redirect to="/home" />
- </Switch>);
靜態(tài)資源加載邏輯設(shè)計(jì)
開始做方案時(shí)，只是設(shè)計(jì)出按需加載的交互體驗(yàn)：即當(dāng)業(yè)務(wù)切換到子項(xiàng)目路徑時(shí)，開始加載子項(xiàng)目的資源，然后渲染頁面。但后面感覺這種改動(dòng)影響了業(yè)務(wù)體驗(yàn)，他們以前只需要加載數(shù)據(jù)時(shí)loading，現(xiàn)在還需要承受子項(xiàng)目加載loading。所以為了讓業(yè)務(wù)盡量小的感知系統(tǒng)的重構(gòu)，將按需加載換成了按需提前加載。簡單點(diǎn)說，就是當(dāng)業(yè)務(wù)登錄時(shí)，我們會(huì)去遍歷他的所有權(quán)限菜單，獲取他擁有那些子項(xiàng)目的訪問權(quán)限，然后提前加載這些資源。
遍歷菜單，提前加載子項(xiàng)目資源：
- // 本地開發(fā)環(huán)境不提前按需加載
- if (getDeployEnv() !== 'local') {
- const apps = getIncludeAppMap();
- // 按需提前加載子項(xiàng)目資源；
- apps.forEach(subKey => startAsyncSubapp(subKey));
- }
然后就是show代碼的時(shí)候了，思路參考webpackJsonp，就是通過攔截一個(gè)全局?jǐn)?shù)組的push操作，得知子項(xiàng)目已加載完成：
- import { subAppMapInfo } from './menus';
- // 子項(xiàng)目靜態(tài)資源映射表存放：
- /**
- * 狀態(tài)定義：
- * '': 還未加載
- * ‘start’：靜態(tài)資源映射表已存在；
- * ‘map’：靜態(tài)資源映射表已存在；
- * 'init': 靜態(tài)資源已加載；
- * 'wait': 資源加載已完成, 待注入；
- * 'finish': 模塊已注入；
- */
- export const subAppRegisterStatus = {};
- export const subappSourceInfo = {};
- // 項(xiàng)目加載待處理的Promise hash 表
- const defferPromiseMap = {};
- // 項(xiàng)目加載待處理的錯(cuò)誤 hash 表
- const errorInfoMap = {};
- // 加載css，js 資源
- function loadSingleSource(url) {
- // 此處省略了一寫代碼
- return new Promise((resolove, reject) => {
- link.onload = () => {
- resolove(true);
- };
- link.onerror = () => {
- reject(false);
- };
- });
- }
- // 加載json中包含的所有靜態(tài)資源
- async function loadSource(json) {
- const keys = Object.keys(json);
- const isOk = await Promise.all(keys.map(key => loadSingleSource(json[key])));
- if (!isOk || isOk.filter(res => res === true) < keys.length) {
- return false;
- }
- return true;
- }
- // 獲取子項(xiàng)目的json 資源信息
- async function getManifestJson(subKey) {
- const url = subAppMapInfo[subKey];
- if (subappSourceInfo[subKey]) {
- return subappSourceInfo[subKey];
- }
- const json = await fetch(url).then(response => response.json())
- .catch(() => false);
- subAppRegisterStatus[subKey] = 'map';
- return json;
- }
- // 子項(xiàng)目提前按需加載入口
- export async function startAsyncSubapp(moduleName) {
- subAppRegisterStatus[moduleName] = 'start'; // 開始加載
- const json = await getManifestJson(moduleName);
- const [, reject] = defferPromiseMap[moduleName] || [];
- if (json === false) {
- subAppRegisterStatus[moduleName] = 'error';
- errorInfoMap[moduleName] = new Error(`模塊：${moduleName}, manifest.json 加載錯(cuò)誤`);
- reject && reject(errorInfoMap[moduleName]);
- return;
- }
- subAppRegisterStatus[moduleName] = 'map'; // json加載完畢
- const isOk = await loadSource(json);
- if (isOk) {
- subAppRegisterStatus[moduleName] = 'init';
- return;
- }
- errorInfoMap[moduleName] = new Error(`模塊：${moduleName}, 靜態(tài)資源加載錯(cuò)誤`);
- reject && reject(errorInfoMap[moduleName]);
- subAppRegisterStatus[moduleName] = 'error';
- }
- // 回調(diào)處理
- function checkDeps(moduleName) {
- if (!defferPromiseMap[moduleName]) {
- return;
- }
- // 存在待處理的，開始處理；
- const [resolove, reject] = defferPromiseMap[moduleName];
- const registerApp = subappSourceInfo[moduleName];
- try {
- const moduleExport = registerApp();
- resolove(moduleExport);
- } catch (e) {
- reject(e);
- } finally {
- // 從待處理中清理掉
- defferPromiseMap[moduleName] = null;
- subAppRegisterStatus[moduleName] = 'finish';
- }
- }
- // window.registerApp.push(['collection', registerApp])
- // 這是子項(xiàng)目注冊的核心，靈感來源于webpack，即對(duì)window.registerApp的push操作進(jìn)行攔截
- export function initSubAppLoader() {
- window.registerApp = [];
- const originPush = window.registerApp.push.bind(window.registerApp);
- // eslint-disable-next-line no-use-before-define
- window.registerApp.push = registerPushCallback;
- function registerPushCallback(module = []) {
- const [moduleName, register] = module;
- subappSourceInfo[moduleName] = register;
- originPush(module);
- checkDeps(moduleName);
- }
- }
- // 按需提前加載入口
- export function loadAsyncSubapp(moduleName) {
- const subAppInfo = subAppRegisterStatus[moduleName];
- // 錯(cuò)誤處理優(yōu)先
- if (subAppInfo === 'error') {
- const error = errorInfoMap[moduleName] || new Error(`模塊：${moduleName}, 資源加載錯(cuò)誤`);
- return Promise.reject(error);
- }
- // 已經(jīng)提前加載，等待注入
- if (typeof subappSourceInfo[moduleName] === 'function') {
- return Promise.resolve(subappSourceInfo[moduleName]());
- }
- // 還未加載的，就開始加載，已經(jīng)開始加載的，直接返回
- if (!subAppInfo) {
- startAsyncSubapp(moduleName);
- }
- return new Promise((resolve, reject = (error) => { throw error; }) => {
- // 加入待處理map中；
- defferPromiseMap[moduleName] = [resolve, reject];
- });
- }
這里需要強(qiáng)調(diào)一下子項(xiàng)目有兩種加載場景：
- 從基座頁面路徑進(jìn)入系統(tǒng), 那么就是按需提前加載的場景, 那么startAsyncSubapp先執(zhí)行，提前緩存資源；
- 從子項(xiàng)目頁面路徑進(jìn)入系統(tǒng), 那就是按需加載的場景，就存在loadAsyncSubapp先執(zhí)行，利用Promise完成發(fā)布訂閱。至于為什么startAsyncSubapp在前但后執(zhí)行，是因?yàn)閡seEffect是組件掛載完成才執(zhí)行；
至此，框架的大致邏輯就交代清楚了，剩下的就是優(yōu)化了。
其他難點(diǎn)
其實(shí)不難，只是怪我太菜，但這些點(diǎn)確實(shí)值得記錄，分享出來共勉。
公共依賴共享
我們由于基座項(xiàng)目與子項(xiàng)目技術(shù)棧一致，另外又是拆分系統(tǒng)，所以共享公共庫依賴，優(yōu)化打包是一個(gè)特別重要的點(diǎn)，以為就是webpack配個(gè)external就完事，但其實(shí)要復(fù)雜的多。
antd 構(gòu)建
antd 3.x就支持了esm，即按需引入，但由于我們構(gòu)建工具沒有做相應(yīng)升級(jí)，用了babel-plugin-import這個(gè)插件，所以導(dǎo)致了兩個(gè)問題，打包冗余與無法全量導(dǎo)出antd Modules。分開來講：
- 打包冗余，就是通過BundleAnalyzer插件發(fā)現(xiàn)，一個(gè)模塊即打了commonJs代碼，也打了Esm代碼；
- 無法全量導(dǎo)出，因?yàn)榛?xiàng)目不知道子項(xiàng)目會(huì)具體用哪個(gè)模塊，所以只能暴力的導(dǎo)出Antd所有模塊，但babel-plugin-import這個(gè)插件有個(gè)優(yōu)化，會(huì)分析引入，然后刪除沒用的依賴，但我們的需求和它的目的是沖突的；
結(jié)論：使用babel-plugin-import這個(gè)插件打包c(diǎn)ommonJs代碼已經(jīng)過時(shí), 其存在的唯一價(jià)值就是還可以幫我們按需引入css 代碼；
項(xiàng)目公共組件共享
項(xiàng)目中公共組件的共享，我們開始嘗試將常用的組件加入公司組件庫來解決，但發(fā)現(xiàn)這個(gè)方案并不是最理想的，第一：很多組件和業(yè)務(wù)場景強(qiáng)相關(guān)，加入公共組件庫，會(huì)造成組件庫臃腫；第二：沒有必要。所以我們最后還是采用了基座項(xiàng)目收集組件，并統(tǒng)一暴露：
- function combineCommonComponent() {
- const contexts = require.context('./components/common', true, /\.js$/);
- return contexts.keys().reduce((next, key) => {
- // 合并components/common下的組件
- const compName = key.match(/\w+(?=\/index\.js)/)[0];
- next[compName] = contexts(key).default;
- return next;
- }, {});
- }
webpackJsonp 全局變量污染
如果對(duì)webpack構(gòu)建后的代碼不熟悉，可以先看看開篇提到的那篇文章。
webpack構(gòu)建時(shí)，在開發(fā)環(huán)境modules是一個(gè)對(duì)象，采用文件path作為module的key; 而正式環(huán)境，modules是一個(gè)數(shù)組，會(huì)采用index作為module的key。
由于我基座項(xiàng)目和子項(xiàng)目沒有做沙箱隔離，即window被公用，所以存在webpackJsonp全局變量污染的情況，在開發(fā)環(huán)境，這個(gè)污染沒有被暴露，因?yàn)槲募﨣ey是唯一的，但在打正式包時(shí)，發(fā)現(xiàn)qa 環(huán)境子項(xiàng)目無法加載，最后一分析，發(fā)現(xiàn)了window.webpackJsonp 環(huán)境變量污染的bug。
最后解決的方案就是子項(xiàng)目打包都擁有自己獨(dú)立的webpackJsonp變量，即將webpackJsonp重命名，寫了一個(gè)簡單的webpack插件搞定：
- // 將webpackJsonp 重命名為 webpackJsonpCollect
- config.plugins.push(new RenameWebpack({ replace: 'webpackJsonpCollect' }));
子項(xiàng)目開發(fā)熱加載
基座項(xiàng)目為什么會(huì)成為基座，就因?yàn)樗偾曳€(wěn)定的特殊性。但開發(fā)時(shí)，由于子項(xiàng)目無法獨(dú)立運(yùn)行，所以需要依賴基座項(xiàng)目聯(lián)調(diào)。但做一個(gè)需求，要打開兩個(gè)vscode，同時(shí)運(yùn)行兩個(gè)項(xiàng)目，對(duì)于那個(gè)開發(fā)，這都是一個(gè)不好的開發(fā)體驗(yàn)，所以我們希望將dev環(huán)境作為基座，來支持本地的開發(fā)聯(lián)調(diào)，這才是最好的體驗(yàn)。
將dev環(huán)境的構(gòu)建參數(shù)改成開發(fā)環(huán)境后，發(fā)現(xiàn)子項(xiàng)目能在線上基座項(xiàng)目運(yùn)行，但webSocket通信一直失敗，最后找到原因是webpack-dev-sever有個(gè)host check邏輯，稱為主機(jī)檢查，是一個(gè)安全選項(xiàng)，我們這里是可以確認(rèn)的，所以直接注釋就行。
