什么是微前端?

前言

其实在小企业里,我对微前端的概念一直很模糊,接触不到,所以只是一种概念性的认知,在这里记录下最近看的一篇文章总结。
微前端架构:旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增加,从一个普通应用演变成一个巨石应用(Frontend Monolith),随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤为常见。

微前端要解决的问题

搞微前端目的就是要将产品原子化,由庞大的应用体系拆分为多个模块,再根据客户业务场景进行组合。每个功能模块能单独迭代,自由集成。

明确一点:

微前端不是框架,不是工具/库,而是一套架构体系,它包括若干库,工具,中心化的治理平台及相关配套设施

  • 微前端包括3个部分:
    1. 微前端的基础设施,这是目前讨论最多的,一个微应用如何通过一个组件基座加载进来,脚手架工具,怎么单独构建和部署,怎么联调。
    2. 微前端配置中心:标准化的配置文件格式,支持灰度,回滚,红蓝,A/B等发布策略
    3. 微前端的可观察性工具:对于 任何分布式特点的架构,线上/线下治理都很重要。
具体要解决好的10个问题:
  1. 微应用的注册、异步加载和生命周期管理;
  2. 微应用之间、主从之间的消息机制;
  3. 微应用之间的安全隔离措施;
  4. 微应用的框架无关、版本无关;
  5. 微应用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么管理;
  6. 微应用独立调试、和主应用联调的方式,快速定位报错(发射问题);
  7. 微应用的发布流程;
  8. 微应用打包优化问题;
  9. 微应用专有云场景的出包方案;
  10. 渐进式升级:用微应用方案平滑重构老项目

基本原理

盗图如下:
微前端基本工作原理

传统项目管理工具通常是命令行工具,包括构建、发布、测试,会升级为项目工作台,通过 Web 界面管理项目。一个项目包括哪些微应用,版本,发布策略等在配置中心统一管理。一个大型应用被「碎片化」后,还要能做到「一目了然」。哪个模块报错,加载失败等异常发生第一时间反应在配置中心里

微前端是一种前端架构模式,它将一个大型的前端应用拆分成多个独立的小型应用,每个小型应用都可以独立开发、独立部署、独立运行,最后再通过一定的方式将这些小型应用集成到一个主应用中。 微前端的主要用途是解决大型前端应用在开发、维护和扩展过程中面临的一系列问题。例如,当应用规模变得非常庞大时,团队之间的协作会变得困难,代码的维护和更新也会变得复杂,同时应用的构建和部署时间也会变得很长。微前端通过将应用拆分成多个小型应用,使得每个团队可以专注于自己的部分,提高了开发效率和协作效果。 和普通的前端相比,微前端的特点和优势主要体现在以下几个方面: 1. **独立开发和部署**:每个微前端应用都可以独立进行开发和部署,这意味着不同的团队可以并行工作,互不干扰,从而提高了开发效率。同时,由于每个应用都是独立的,因此可以单独进行版本更新和发布,降低了风险。 2. **技术栈无关**:微前端允许不同的微应用使用不同的技术栈进行开发。这意味着团队可以根据自己的需求和偏好选择最适合的技术,而不必受到整个应用技术栈的限制。 3. **易于扩展和维护**:由于微前端应用是由多个小型应用组成的,因此当需要添加新功能或修改现有功能时,只需要对相应的微应用进行操作即可,而不必对整个应用进行重构。这大大降低了应用的维护成本。 4. **提升用户体验**:微前端可以实现应用的按需加载,即只有当用户需要访问某个功能时,才加载对应的微应用。这样可以减少应用的初始加载时间,提升用户体验。 ```javascript // 示例:简单的微前端集成代码(主应用加载微应用) // 主应用中动态加载微应用 function loadMicroApp(appName, appUrl) { const script = document.createElement('script'); script.src = appUrl; script.onload = () => { console.log(`${appName} 微应用加载完成`); // 这里可以调用微应用暴露的初始化方法 if (window[appName] && window[appName].init) { window[appName].init(); } }; document.head.appendChild(script); } // 调用加载微应用 loadMicroApp('microApp1', 'https://example.com/micro-app1.js'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值