前端学堂
学有所用

微前端落地业务实践

文章目录[隐藏]

本来很早想写这部分的,现在这套技术方案基本比较成熟了,阿里开源的飞冰微前端方案也很好用,这里就简单介绍下好了。

微前端工程的架构

采用微前端架构的工程相比于传统的pc端后台工程,其最大的特点是将页面、功能模块以子应用、微模块的形式拆分出去,主应用作为一个骨架,将分散的子应用、微模块组装起来。这种分布式的前端开发方式有点类似服务端微服务架构,其优势是:

  1. 工程拆分后,每个工程的体量变小了,代码复杂度降低了,加快了构建、发布的速度
  2. 技术架构(比如基础库、组件库)升级更加平滑,因为可以部分子应用先升级架构,不影响其他子应用
  3. 单个工程可以独立交付,分布式开发提高了开发的灵活性
  4. 子应用和微模块可以被多个主应用使用,提高了代码的复用能力,为业务功能多向输出赋能
  5. 能支持多种不同技术架构的子应用或微模块

微前端架构中的名词解释:

主应用

主应用提供整个应用的骨架,具体业务功能由子应用(app)和微模块(module)组装实现。子应用和微模块可以被不同的主应用使用,从而实现灵活复用!

子应用

子应用是一个码头项目,实现了一个完整的功能闭环。其内部一般有一个或者多个页面。

主应用需要在码头上关联子应用,关联后子应用的版本自动升级。

适用场景:

  1. 对应一个完整的功能闭环,关联了主应用的菜单和路由
  2. 支持功能独立交付
  3. 历史项目兼容用

微模块

微模块也是码头项目,但是比子应用粒度更小。

微模块与子应用的区别:

  1. 在业务功能上主要实现单个业务模块、或者业务组件,而不是一个或多个页面。
  2. 没有路由功能。
  3. 使用微模块加载器来加载,加载器本质是一个组件物料。

适用场景:

  1. 主应用中独立的业务功能,不关联路由
  2. 支持功能独立交付
  3. 历史项目兼容用

物料

UI组件库,组件模板,功能lib组件等等

飞冰微前端

icestark 是一个面向大型系统的微前端解决方案,适用于以下业务场景:

  • 后台比较分散,体验差别大,因为要频繁跳转导致操作效率低,希望能统一收口的一个系统内
  • 单页面应用非常庞大,多人协作成本高,开发/构建时间长,依赖升级回归成本高
  • 系统有二方/三方接入的需求

icestark 在保证一个系统的操作体验基础上,实现各个微应用的独立开发和发版,主应用通过 icestark 管理微应用的注册和渲染,将整个系统彻底解耦。

赞(0) 打赏
一分也是爱,觉得好请我喝杯咖啡吧!前端学堂 » 微前端落地业务实践

一分也是爱,觉得好请我喝杯咖啡吧!

支付宝扫一扫打赏

微信扫一扫打赏