微前端建设方案

 

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