首页 > 其他分享 >微前端概念

微前端概念

时间:2022-12-06 15:55:15浏览次数:56  
标签:github https micro 前端 概念 iframe 应用

微前端是什么?

微前端提供了一种技术:可以将多个独立的Web应用聚合到一起,提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用,但是在技术角度上是由一个个独立的应用组合通过某种方式组合而成的。

目前的微前端框架一般都具有以下三个特点:

  • 技术栈无关:主框架不限制接入应用的技术栈,子应用具备完全自主权。

  • 独立性强:独立开发、独立部署,子应用仓库独立。

  • 状态隔离:运行时每个子应用之间状态隔离。

什么项目适合微前端架构?

拆分巨型应用,使应用变得更加可维护

兼容历史应用,实现增量开发

需要支持动态插拔的机制

 

微前端架构有哪些劣势?

重复依赖:不同应用之间依赖的包存在很多重复,由于各个应用独立开发、编译和发布,难免会存在重复依赖的情况。导致不同应用之间需要重复下载依赖,额外增加流量和服务端的压力

技术成本变高:一个问题的跟踪,可能需要对应的人员,懂微前端,同事懂主应用与子应用,每一个框架,有时候需要同时深入vue与react与微前端才能解决问题。复杂的从代码转向基建。

没有坚强的前端周边让其充分发挥架构的优势

 

iframe方案有哪些优缺点?

腾讯开发的无界微前端就是基于iframe实现的。

这种方法一种实现就是使用iframe,通过配置不同的src加载不同的子应用页面。

<iframe src="https://test.qq.com/a/index.html"></iframe>

 

iframe优点

  • iframe 自带的样式、环境隔离机制使得它具备天然的沙盒机制

  • 嵌入子应用比较简单

iframe缺点

  • iframe功能之间的跳转是无效的,刷新页面无法保存状态。

  • URL的记录完全无效,刷新会返回首页。

  • 主应用劫持快捷键操作,事件冒泡不穿透到主文档树上。

  • 模态弹窗的背景是无法覆盖到整个应用。

  • iframe应用加载失败,内容发生错误主应用无法感知,通信麻烦

主流的微前端框架有哪些:qiankun、wujie、micro-app、emp

qiankun 地址

官网地址:https://qiankun.umijs.org/zh/guide

github 地址:https://github.com/umijs/qiankun

 

无界地址

github:https://github.com/Tencent/wujie

文档:https://wujie-micro.github.io/doc

demo:https://wujie-micro.github.io/demo-main-vue/home

 

micro-app 地址

官方文档:https://cangdu.org/micro-app/docs.html#/zh-cn/changelog

github 地址:https://github.com/micro-zoe/micro-app

 

ENP 地址

官网地址:https://emp2.netlify.app

github:https://github.com/efoxTeam/emp

 

标签:github,https,micro,前端,概念,iframe,应用
From: https://www.cnblogs.com/wxyblog/p/16955529.html

相关文章

  • 前端直传图片到oss操作
    1.前端直传图片到oss操作:不经过后端,直接前段直传,阿里云也支持。   TRANSLATEwithxEnglishArabicHebrewPolishBulgarianHindiPortugue......
  • 【每天一个java设计模式(零)】 - 设计模式基本概念及七大设计原则
    设计模式概述设计模式是什么?它是软件开发人员在软件开发过程中经过相当长的一段时间的试验和错误总结出来的面临的一般问题的解决方案;它是一套被反复使用的、多数人知晓的、......
  • 前端代码规范
    1.京东凹凸实验室前端代码规范,网址:[https://guide.aotu.io/](https://guide.aotu.io/)(1)、正确写法 <br>   不推荐写法:<br/>(2)、纯数字输入框   使用 type="t......
  • 关于分布式概念的一些个人理解
    起因最近想了解分布式相关的概念,刚好之前也对像是线性一致性,顺序一致性,因果一致性,序列化,也就是CAP和ACID各种概念非常混乱和不解,有幸看到一些文章,有了一些新的认知,特此记......
  • #yyds干货盘点#前端keepalive缓存清理
    说到​​Vue​​​缓存,我们肯定首先选择官方提供的缓存方案​​keep-alive​​内置组件来实现。​​keep-alive​​组件提供给我们缓存组件的能力,可以完整的保存当前组......
  • 前端JS
    html页面两种引入js的方式Script标签内写代码<script>//在这里写你的JS代码</script>引入额外的JS文件<scriptsrc="myscript.js"></script>两种注释语法//......
  • 前端开发npm start的引导过程
    以react初始化项目为例:[email protected]:geektcp/react-init.git package.json的内容如下:{"name":"react-init","version":"0.1.0","private":......
  • QDU-前端的修改
    以修改为中文显示为例下载前端npminstall#weusewebpackDllReferencetodecreasethebuildtime,#thiscommandonlyneedsexecuteonceunlessyouupgrade......
  • 业务流程 | 前端 =》 后端 =〉 数据库 (待补充)
    关键词:CSR前=》C=〉S=》R=〉S=》C=〉前dtoboentityentity、bo、vo、po、dto、pojo如何理解和区分?-简书(jianshu.com)......
  • 前端-JavaScript
    1.JS简介1.全称JavaScript,但是与Java一点关系都没有,这么叫是因为蹭热度。2.是一门前端工程师的编程语言,但是它本身有很多逻辑错误。2.JS基础1.注释语法: //单行......