美文网首页
😄--微前端的架构

😄--微前端的架构

作者: YI_YI_ | 来源:发表于2020-01-21 10:27 被阅读0次

1. 微前端

将一个巨大的前端项目拆分成为很多的小的前端项目;

(1) 如何拆分?

(2) 如何协作?

将一个单页面前端应用 由单一的单体应用转变为多个小型前端应用聚合为一的应用;

各个前端项目可以单一开发,并且单一部署;

同时,它们之间可以使用共享组件并行开发;

为什么要需要为前端这样的思想进行架构项目:

(1) 遗留系统迁移;

(2) 聚合前端应用;

(3) 新技术;


微前端
好处:

(1) 分而治之;遵循统一接口规范或框架;

(2) 单一职责;只需要关注自己的业务功能就好;

(3) 技术栈无关;

缺点:

(1) 依赖基础设施构建,依赖项的维护成本;

(2) 拆分粒度过小,维护成本较高;

(3) 技术栈混乱;

2.架构

  1. 查找应用的机制。固定值配置文件(动态更新配置)
功能:

(1) 应用发现;

(2) 应用注册;

(3) 第三方应用注册;

(4) 访问权限管理;

设计理念:

中心化:应用注册表;

标识化应用:需要一个标识符来标记不同的应用;

应用生命周期管理;

高内聚,低耦合;

生命周期:

微前端应用作为一个客户端应用,每一个应用都拥有自己的生命周期;

Loadàbootstrapàmountàunloadàunmount

加载—》分配资源—》创建domà删除应用生命周期—》卸载删除事件dom

3. 如何进行拆分(通过哪些原则)

(1) 技术方式

(2) 路由分发方式

(3) 前端微服务化

(4) 组合式集成:微应用化

(5) 微件化

(6) 前端容器化

(7) 业务拆分

(8) 应用微化架构

(9) 整洁前端架构

相关文章

  • 微前端技术

    一.微前端概念 前端微服务 二.常用前端架构 MPA(体验不好)SPA(体验号,但是体量大) 三.微前端架构 技术...

  • 基于qiankun的微前端最佳实践-通信篇(Vuex)

    大家好~~ 在开始介绍 qiankun 的应用通信之前,我们需要先了解微前端架构如何划分子应用。 在微前端架构中,...

  • 【前端】架构设计

    一、微前端 微前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦,前端聚合 热闹驱...

  • 微前端架构

    微前端架构实际验证可实现:主子应用架构拆分,子应用不限定框架,可以是vue也可以是react,原生js应用; 可...

  • 😄--微前端的架构

    1. 微前端 将一个巨大的前端项目拆分成为很多的小的前端项目; (1) 如何拆分? (2) 如何协作? 将一个单页...

  • 基于qiankun 微应用--应用间通信

    在微前端架构中,我们应该按业务划分出对应的子应用,而不是通过功能模块划分子应用。这么做的原因有两个: 在微前端架构...

  • 前端必看的微前端

    前端必看的微前端 管大家有意或者无意间,或多或少都已经接触到了微前端这个新的概念,这种新的前端架构真的有存在的必要...

  • 微前端——概述(一)

    微前端是什么? 微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体...

  • 微前端架构实践

    微前端解决的问题 跨框架: 在一个页面上运行,可以同时使用多个框架 应用拆分:将一个复杂的应用拆解为多个微小的应用...

  • 前端架构——微前端系列(一)

    背景 最近项目开发中使用了qiankun框架去做微前端,我是属于半懂不懂的状态,大概了解过微前端是什么,可以解决什...

网友评论

      本文标题:😄--微前端的架构

      本文链接:https://www.haomeiwen.com/subject/tpydoctx.html