微前端概念

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
可观测链路 OpenTelemetry 版,每月50GB免费额度
性能测试 PTS,5000VUM额度
简介: 微前端概念

@[toc]

微前端概念


概念

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

微前端的核心价值

  1. 技术栈无关 主框架不限制接入应用的技术栈,微应用具备完全自主权
  2. 独立开发、独立部署 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  3. 增量升级 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
  4. 独立运行 每个微应用之间状态隔离,运行时状态不共享

微前端的实现演变

  1. iFrame
  2. Qiankun
  3. Webpack 5 的 Module Federation

相关框架 Qiankun

Qiankun 是基于 single-spa 的微前端实现库,由阿里开发

优势是技术解耦、样式隔离、JS 沙箱、资源预加载、提供了 UMI 插件、兼容 IE11

官网

github地址

qiankun 技术圆桌

微前端框架qiankun以及源码

相关框架 Webpack 5 的 Module Federation

优点是基于 Webpack , 前端比较熟悉,上手快
缺点是需要所有的项目都基于 Webpack ,且已经升级到 Webpack 5 ,局限性较大

webpack5官网

Webpack5 跨应用代码共享 - Module Federation

相关框架 Piral

优点是高度模块化、多框架兼容、支持资源文件拆分、全局状态管理、独立开发部署、CLI 工具
缺点是文档太少,且资料都是英文的

https://docs.piral.io/guidelines/tutorials/01-introduction

github

相关文章
|
3月前
|
缓存 前端开发 JavaScript
第三章(概念篇) 微前端架构模式
第三章(概念篇) 微前端架构模式
|
3月前
|
前端开发 JavaScript
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
92 3
|
7天前
|
前端开发 Java
【前端学java】全网最通俗易懂的JAVA抽象概念(07)
【8月更文挑战第9天】全网最通俗易懂的JAVA抽象概念
17 2
|
3月前
|
前端开发 JavaScript Java
浅谈企业级前端应用中的组件概念和具体的应用
浅谈企业级前端应用中的组件概念和具体的应用
|
3月前
|
运维 前端开发 JavaScript
第二章(概念篇) 微前端与单体前端对比
第二章(概念篇) 微前端与单体前端对比
|
3月前
|
前端开发 JavaScript 开发者
第一章(概念篇) 微前端介绍与背景
第一章(概念篇) 微前端介绍与背景
109 0
|
3月前
|
监控 前端开发 jenkins
Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程
【4月更文挑战第29天】本文探讨了Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程。前端持续部署涉及代码提交、构建、测试和部署四个步骤。实现过程中需配置代码仓库、构建、测试和部署任务,安装相关插件并确保环境一致性。注意事项包括代码质量控制、环境一致性、监控预警和安全管理。通过Jenkins,可提升前端开发效率和质量,但需不断学习以应对技术发展。
62 0
|
3月前
|
前端开发 UED
微前端架构的崛起:概念与实践
微前端架构是一种新兴的前端架构模式,与传统的单体式前端架构有所不同。本文将介绍微前端架构的基本概念和具体实践,讨论其优势和劣势,以及如何在项目中应用微前端架构。
88 0
|
3月前
|
编解码 前端开发 UED
什么是前端 Web 应用响应式页面布局里的 Breakpoint 概念
什么是前端 Web 应用响应式页面布局里的 Breakpoint 概念
|
9月前
|
前端开发 JavaScript
了解事件冒泡:理解前端开发中的重要概念
了解事件冒泡:理解前端开发中的重要概念
64 0