微前端

一、简介

将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面和应用程序。

微前端

二、组成部分

1. 生命周期

管理 APP 行为，每个 APP 规定有四个生命周期。

export default {
    // 启动
    bootstrap: [() => Promise.resolve()],
    // 挂载
    mount: [() => Promise.resolve()]
    // 卸载
    unmount: [() => Promise.resolve()]
    // 更新
    update: [() => Promise.resolve()]
}

export default {
    // 启动
    bootstrap: [() => Promise.resolve()],
    // 挂载
    mount: [() => Promise.resolve()]
    // 卸载
    unmount: [() => Promise.resolve()]
    // 更新
    update: [() => Promise.resolve()]
}

2. 状态

3. 执行流程

微前端框架

isStarted false 预加载 APP
isStarted true 已启动微前端框架
/home -> /user 卸载 home 相关的 App，加载 user 相关的 App，挂载 user 相关的 App。
/home -> app1 执行过程中，如果切换至 /user，首先卸载旧 app，然后挂载 app2。

执行流程