第1章 概述
爲解決項目前端的高耦合、改動牽一髮而動全身、多種技術棧強制混用、前端反覆重構不徹底的問題，提出微前端的建設。
微前端指的是一種由獨立交付的多個前端應用組成整體的架構風格。具體的，將前端應用分解成一些更小、更簡單的能夠獨立開發、測試、部署的小塊，而在用戶看來仍然是一個整體。
第2章 需求分析
2.1 現狀分析
目前GA-OA項目的前端是一個整體項目，每一次變更整體打包、部署，項目跟隨需求變動越來越龐大，達到200M。
需求迭代頻繁、多種風格與組件混用，研發週期較長。
2.2 微前端需求
要求根據業務，將前端進行拆分，獨立研發、測試、部署、運行，達到解耦的目的。
2.3 技術需求
要求：
1、前端主框架，跟技術架構無關，不具備特性。
2、應用微前端，可以集成主框架運行，可以獨立運行。
3、應用微前端，不能強依賴主框架的基礎文件。
2.4 總體設計
第3章 架構設計
3.1 微前端架構設計
實現“1+1+N模式”。1個不具備特性的前端框架，1個主應用前端實現佈局、首頁等特性，N個業務應用前端（不受前端技術限制）集成。
3.2 微前端技術設計
qiankun（乾坤） 就是一款由螞蟻金服推出的比較成熟的微前端框架，基於 single-spa 進行二次開發，用於將 Web 應用由單一的單體應用轉變爲多個小型前端應用聚合爲一的應用。
第4章 研發清單
4.1 研發清單
|
一 |
前端架構 |
|
|
1 |
主架構前端 |
|
|
2 |
測試Demo前端 |
|
|
3 |
主應用前端（IBPS） |
|
|
二 |
應用微前端 |
|
|
1 |
公文辦理前端 |
|
|
2 |
通知公告前端 |
|
|
3 |
會議前端 |
|
|
4 |
規範性前端 |
|
|
5 |
主應用前端（改造） |
|
|
|
|
|
第5章 建設步驟
5.1 前端主架構
搭建前端的基底框架（乾坤），可以集成主應用、業務應用，無技術限制。
研發主應用與微前端需要的公共組件、腳本
5.2 Demo測試
研發一個Demo，包含：主架構、主應用（整個GA-OA前端）、應用微前端，可以訪問主應用，同時可以訪問獨立應用微前端。
5.3 主應用集成
將GA-OA整個前端作爲主應用，集成至主架構。
5.4 公文辦理
l 重構公文辦理應用微前端
l 公文辦理微前端，集成至主架構
l 主應用（GA-OA）剔除公文辦理相關源碼
5.5 通知通告
l 重構通知公告微前端
l 通知公告微前端，集成至主架構
l 主應用（GA-OA）剔除通知公告相關源碼
5.6 會議管理
l 重構會議管理微前端
l 會議管理微前端，集成至主架構
l 主應用（GA-OA）剔除會議管理相關源碼
5.7 規範性文件
l 重構規範性文件微前端
l 規範性文件微前端，集成至主架構
l 主應用（GA-OA）剔除規範性文件相關源碼
5.8 主應用改造
l 重構主應用
l 主應用，集成至主架構
l 整個項目全部完成替換
第6章 接入規範
微應用不需要額外安裝任何其他依賴即可接入 qiankun 主應用。
6.1 導出相應的生命週期鉤子
微應用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 導出 bootstrap、mount、unmount 三個生命週期鉤子，以供主應用在適當的時機調用。
/**
* bootstrap 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鉤子，不會再重複觸發 bootstrap。
* 通常我們可以在這裏做一些全局變量的初始化，比如不會在 unmount 階段被銷燬的應用級別的緩存等。
*/
export async function bootstrap() { console.log('react app bootstraped'); }
/**
* 應用每次進入都會調用 mount 方法，通常我們在這裏觸發應用的渲染方法
*/
export async function mount(props) { ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root')); }
/**
* 應用每次 切出/卸載 會調用的方法，通常在這裏我們會卸載微應用的應用實例
*/
export async function unmount(props) { ReactDOM.unmountComponentAtNode( props.container ? props.container.querySelector('#root') : document.getElementById('root'), ); }
/**
* 可選生命週期鉤子，僅使用 loadMicroApp 方式加載微應用時生效
*/
export async function update(props) { console.log('update props', props); }
6.2 配置微應用的打包工具
除了代碼中暴露出相應的生命週期鉤子之外，爲了讓主應用能正確識別微應用暴露出來的一些信息，微應用的打包工具需要增加如下配置：
webpack: const packageName = require('./package.json').name; module.exports = { output: { library: `${packageName}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`, }, };
6.3 跨域配置
vue.config.js 修改
headers: { 'Access-Control-Allow-Origin': '*' }
6.4 路由設計
子應用路由模式採用 hash 模式
附件：工作量評估
|
一 |
前端架構 |
工作量（人天） |
|
1 |
主架構前端 |
7 |
|
2 |
測試Demo前端 |
14 |
|
3 |
主應用前端（IBPS） |
7 |
|
二 |
應用微前端 |
|
|
1 |
公文辦理前端（重構） |
60 |
|
2 |
通知公告前端 |
20 |
|
3 |
會議前端 |
30 |
|
4 |
規範性前端 |
20 |
|
5 |
主應用前端（改造） |
持續 |
|
|
|
|