美文网首页
微前端导读

微前端导读

作者: 我是小布丁 | 来源:发表于2021-08-29 15:39 被阅读0次

为什么需要学习微前端?我们通过3w(what,why,how)的方式来讲解微前端

1、什么是微前端?

image.png

微前端就是将不同的功能按照不同的维度拆分成多个子应用,通过主应用来加载这些子应用
微前端的核心在于拆,拆完后再合。

2、为什么去使用微前端?

  • 不同团队开发同一个应用技术栈不同怎么破?
  • 希望每个团队都可以独立开发,独立部署怎么破?
  • 项目中还需要老的应用代码怎么破?
    我们是不是可以将一个应用划分成若干个子应用,将子应用打包成一个个的lib,当路径切换时加载不同的子应用,这样每个子应用都是独立的,技术栈也不用做限制了!从而解决了前端协同开发问题

3、怎么落地微前端?

类似操作系统,会安装很多应用,每点一个功能就起一个应用。微前端相当于把前端页面用多个功能和服务进行安装。

2018年 Single-SPA 诞生了,Single-SPA 是一个用于微前端服务化的JS前端解决方案(本身没有出来样式隔离,js执行隔离)实现了路由劫持和应用加载
2019年 qianku 基于Single-SPA,提供了开箱即用的API(Single-SPA + sandbox + import-html-entry)做到了 技术栈无关、并且接入简单(像iframe 一样简单)

总结: 子应用可以独立构建,运行时动态加载主子应用,完全解耦,技术栈无关,靠的是协议接入(子应用必须导出bootstrap、mount、unmount方法)

nginx解决、iframe解决

这不就是iframe吗?
如果使用iframe中的子应用切换路由时,用户刷新页面之前的数据就丢了

应用通信:

  • 基于URL来进行数据传递,但是传递消息能力弱
  • 基于CustomEvent实现通信
  • 基于props主子应用间通信
  • 使用全局变量
  • Redux进行通信

公共依赖:

  • CDN extenals
  • wepack 联邦模块

相关文章

  • 微前端导读

    为什么需要学习微前端?我们通过3w(what,why,how)的方式来讲解微前端 1、什么是微前端? 微前端就是将...

  • 微前端解决方案-qiankun实战及部署(持续更新中。。。)

    一.导读 1.什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方...

  • 微前端:了解下概念

    qiankun(乾坤) 微前端实践 可能是你见过最完善的微前端解决方案 实施微前端的六种方式 微前端-美团系列

  • 【前端】架构设计

    一、微前端 微前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦,前端聚合 热闹驱...

  • 微前端技术

    一.微前端概念 前端微服务 二.常用前端架构 MPA(体验不好)SPA(体验号,但是体量大) 三.微前端架构 技术...

  • 前端微应用化

    微应用与微前端 微应用框架是一种类微前端框架; 相比与微前端,微应用实施成本低、技术难度小、维护成本低; 微应用化...

  • 同样做前端,为何差距越来越大?

    阿里妹导读:前端应用越来越复杂,技术框架不断变化,如何成为一位优秀的前端工程师,应对更大的挑战?今天,阿里前端技术...

  • 《微习惯》导读分享

    下面是这本书《微习惯》的导读,这本小书读起来,可以有三个节奏 第一个节奏,【第一,二,三章】 就是作者为什么写这本...

  • 微前端——乾坤qiankun Demo

    微前端——qiankun(乾坤)实例 一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过...

  • 金融壹账通前端H5技术周报(第六期)

    本期导读: 原创专题带来诗沂微信js-sdk调试的分享,以及本人对前端开发热更新原理的一些解读。语言基础紧随牛人的...

网友评论

      本文标题:微前端导读

      本文链接:https://www.haomeiwen.com/subject/qpdcbltx.html