为什么需要微前端?

  1. 微前端是一种软件架构，可以将不同的功能按照不同的维度拆分成多个子应用，通过主应用来加载这些子应用；
  2. 微前端中的应用可以独立构建和发布；
  3. 微前端架构与框架无关，每个微应用都可以使用不同的框架；
  4. 微前端的核心在于拆, 拆完后在合！

为什么使用微前端？

  1. 拆分巨型应用，使应用变得更加可维护；

  2. 兼容历史应用，实现增量开发：在保留原有项目的同时，可以完全使用新的框架开发新的需求，然后再使用微前端架构将旧的项目和新的项目进行整合；

  3. 可以独立开发，独立部署：在使用了微前端架构后，可以将不同的功能模块拆分成独立的应用，此时功能模块就可以单独构建单独发布了，构建时间也会变得非常快，应用发布后不需要更改其他内容应用就会自动更新；

  4. 允许单个团队做出技术决策：因为微前端构架与框架无关，当一个应用由多个团队进行开发时，每个团队都可以使用自己擅长的技术栈进行开发，也就是它允许适当的让团队决策使用哪种技术，从而使团队协作变得不再僵硬；

怎样落地微前端?

  1. 解决方案：子应用可以独立构建，运行时动态加载，主、子应用完全解耦，技术栈无关，靠的是协议接入（子应用必须导出 bootstrap、mount、unmount 方法）

    • 2018 年 Single-SPA 诞生了： Single-SPA 是一个用于前端微服务化的 JavaScript 前端解决方案实现了路由劫持和应用加载（本身没有处理样式隔离，js 执行隔离）；
    • 2019 年 qiankun 诞生了：基于 Single-SPA 提供了更加开箱即用的 API（single-spa + sandbox + import-html-entry）做到了技术栈无关并且接入简单（像 iframe 一样简单）；

  2. iframe 的问题：iframe 中的子应用切换路由时用户刷新页面，会丢失状态；

  3. 应用通信的几种方式:

    • 基于 URL 来进行数据传递，但是传递消息能力弱；
    • 基于 CustomEvent（浏览器自定义事件） 实现通信；
    • 基于 props 主、子应用间通信；
    • 使用全局变量、Redux 进行通信；

  4. 公共依赖:

    • CDN -externals；
    • webpack 联邦模块；
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 为什么需要微前端?
  2. 2. 为什么使用微前端？
  3. 3. 怎样落地微前端?