微前端建设方案
第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 |
主应用前端（改造） |
持续 |
|
|
|
|
