微前端与微前端实践

淡淡的烟草味﹌ 2022-10-08 12:22 274阅读 0赞

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

# 一、什么是微前端 #

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

# 二、解决的问题 #

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

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

# 三、微前端架构的优点 #

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

# 四、带来的问题 #

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

# 五、现有微前端解决方案 #

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

1.  微前端框架  
    Single-Spa： 最早的微前端框架，兼容多种前端技术栈。  
    [Single-Spa官方文档][Single-Spa]  
    [single-spa npm][]
    
    qiankun框架：基于Single-Spa，阿里系开源微前端框架。目前用的比较多的框架。  
    [qiankun官方文档][qiankun]
    
    Icestark: 阿里飞冰微前端框架，兼容多种前端技术栈。类似于 single-spa 实现，React 技术栈友好，阿里的另一个轮子。  
    [icestark npm][]  
    [icestark微前端文档][icestark]
    
    Mooa：基于Angular的微前端服务框架  
    [Mooa npm][]
    
    Ara Framework：由服务端渲染延伸出的微前端框架。  
    [Ara framework官方文档][Ara framework]
2.  微前端的几种模式
    
    > iframe  
    > 基座模式，主要基于路由分发，qiankun和single-spa就是基于这种模式  
    > 组合式集成，即单独构建组件，按需加载，类似npm包的形式  
    > EMP，主要基于Webpack5 Module Federation  
    > Web Components
    
    [Web Components——MDN][Web Components_MDN]

# 六、微前端架构应用场景 #

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

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

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

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

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

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

# 八、问题解决方案 #

1.  主应用、子应用与子应用之间通信与路由跳转问题  
    微应用之间跳转:
    
        > 通过主应用props传主应用的路由实例跳转， 然后使用router 跳转
         > 通过history.pushState()
    
    传值/通信:
    
        > 通过主应用props传值
         > qiankun API通信(全局状态池)
    
    [qiankun官方通信API文档][qiankun_API]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDM2NTk5_size_16_color_FFFFFF_t_70_pic_center]  
    通过图片我们可以大致了解到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等

[Single-Spa]: https://zh-hans.single-spa.js.org/docs/getting-started-overview
[single-spa npm]: https://www.npmjs.com/package/single-spa
[qiankun]: https://qiankun.umijs.org/zh/guide
[icestark npm]: https://www.npmjs.com/package/icestark
[icestark]: https://www.bookstack.cn/read/icestark/bb233fa4a658271a.md#%E8%83%8C%E6%99%AF
[Mooa npm]: https://www.npmjs.com/package/mooa
[Ara framework]: https://ara-framework.github.io/website/docs/quick-start.html
[Web Components_MDN]: https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
[qiankun 1]: https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8
[qiankun 2]: https://www.cnblogs.com/love314159/p/13791556.html
[qiankun_CSDN]: https://blog.csdn.net/qq_41694291/article/details/113842872
[qiankun_API]: https://qiankun.umijs.org/zh/api#initglobalstatestate
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDM2NTk5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/9c86589a556744799d404bb06035b054.png