最近一段时间，公司开始用微前端做项目了，这也促使我不断的去了解这个新的架构体系。在此过程中，总结了一个文档分享给大家，希望大家看过之后能有所收获。

一、什么是微前端

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系。

二、解决的问题

随着项目开发迭代，功能越来越多，如果所有功能模块都在同一个项目中，那么项目会越来越大、越来越臃肿。带来的问题：

打包构建时间越来越长
维护困难（业务复杂、业务耦合问题）
开发耗时不断增加（项目过大、不仅对电脑配置要求高，且启动项目耗时多，增加了开发时间成本）
测试困难（改了其中某个小的功能点，需要全量回归测试）
无法独立发布功能模块（每次须发布所有功能模块）
扩展性不好（业务耦合度高，扩展一个功能风险较大）

三、微前端架构的优点

巨型应用拆成小应用后可以交由不同的团队维护不同的功能模块
子应用独立开发、维护、构建、测试、部署，加快了构建部署速度
可以整合不同技术栈的项目，如Vue、React、Angular等或者是历史老项目

四、带来的问题

主应用、子应用与子应用之间通信问题
路由跳转问题
公共资源共用问题
主微应用的隔离问题
目前开发体验不太友好，会遇到各种各样的问题

五、现有微前端解决方案

以下框架是我找到的较为成熟的微前端框架，但截止目前我只用过qiankun。如果有需要大家可以看一下其他各种微前端框架是如何应用的，对应框架下面有相对的文档路径。

1. 微前端框架
   Single-Spa： 最早的微前端框架，兼容多种前端技术栈。
   Single-Spa官方文档
   single-spa npm

   qiankun框架：基于Single-Spa，阿里系开源微前端框架。目前用的比较多的框架。
   qiankun官方文档

   Icestark: 阿里飞冰微前端框架，兼容多种前端技术栈。类似于 single-spa 实现，React 技术栈友好，阿里的另一个*。
   icestark npm
   icestark微前端文档

   Mooa：基于Angular的微前端服务框架
   Mooa npm

   Ara Framework：由服务端渲染延伸出的微前端框架。
   Ara framework官方文档

2. 微前端的几种模式

   iframe
   基座模式，主要基于路由分发，qiankun和single-spa就是基于这种模式
   组合式集成，即单独构建组件，按需加载，类似npm包的形式
   EMP，主要基于Webpack5 Module Federation
   Web Components

   Web Components——MDN

六、微前端架构应用场景

微前端帮助开发者解决了实际的问题，但是对于每个业务来说，是否适合使用微前端，以及是否正确的使用微前端，还是需要遵循以下一些原则：

微前端最佳的使用场景是一些B端的管理系统，既能兼容集成历史系统，也可以将新的系统集成进来，并且不影响原先的交互体验
发现使用微前端反而使效率变低，简单的变更复杂那就说明微前端并不适用，如移动端H5页面。

七、基于qiankun的微前端最佳实践(以Vue项目为例)

基于qiankun框架的微前端使用文档网上已经有很多了，我这里只做一个流程总结。推荐大家几篇我认为比较好的文章，大家可以点进去跟着实操一下。

使用流程：
本地用vue-cli新建两个vue项目（一个主应用、一个子应用）
安装qiankun
在主应用中注册微应用
在子应用和主应用进行路由配置
在子应用导出生命周期，并渲染

推荐文档：
qiankun官方文档——项目实践
qiankun从搭建到部署实践——博客园
微前端框架qiankun之原理与实战——****

八、问题解决方案

1. 主应用、子应用与子应用之间通信与路由跳转问题
   微应用之间跳转:

    > 通过主应用props传主应用的路由实例跳转， 然后使用router 跳转
    > 通过history.pushState()
   

   传值/通信:

    > 通过主应用props传值
    > qiankun API通信(全局状态池)
   

   qiankun官方通信API文档
   
   通过图片我们可以大致了解到qiankun官方通信API的通信方式，全局通信。

2. 公共资源共用问题
   webpack 5.x Federated Modules（联合模块）
   windows挂载
   cdn - externals

3. 主微应用的隔离问题
   开启沙盒模式，vue项目样式加scope

   start({
   	sandbox: { strictStyleIsolation: true }
   })
   

4. 微应用优化
   解决第一次进入预加载过久：关闭预加载，以后每次点击之后需要才加载微应用

   start({
    prefetch: false
   })
   

   微应用资源文件过多导致加载很慢：用webpack插件实现资源压缩。UglifyJsPlugin、CompressionWebpackPlugin等