微前端概念

本文涉及的产品
应用实时监控服务-应用监控,每月50GB免费额度
可观测可视化 Grafana 版,10个用户账号 1个月
性能测试 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

相关文章
|
9月前
|
缓存 前端开发 JavaScript
第三章(概念篇) 微前端架构模式
第三章(概念篇) 微前端架构模式
146 0
|
9月前
|
前端开发 JavaScript
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
118 3
|
2月前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
3月前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
3月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
82 8
|
3月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
124 1
|
4月前
|
存储 前端开发 JavaScript
前端必备知识:闭包的概念、作用与应用
前端必备知识:闭包的概念、作用与应用
54 1
|
4月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
4月前
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
54 0
|
6月前
|
前端开发 Java
【前端学java】全网最通俗易懂的JAVA抽象概念(07)
【8月更文挑战第9天】全网最通俗易懂的JAVA抽象概念
39 2