第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 阶段被销毁的应用级别的缓存等。
*/
代码语言：javascript复制export async function bootstrap() {
console.log('react app bootstraped');
}/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
代码语言：javascript复制export async function mount(props) {
ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
代码语言：javascript复制export async function unmount(props) {
ReactDOM.unmountComponentAtNode(
props.container ? props.container.querySelector('#root') : document.getElementById('root'),
);
}/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
代码语言：javascript复制export async function update(props) {
console.log('update props', props);
}6.2 配置微应用的打包工具
除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：
代码语言：javascript复制webpack:
const packageName = require('./package.json').name;
module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};6.3 跨域配置
vue.config.js 修改
代码语言：javascript复制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 | 主应用前端（改造） | 持续 |
