工作记录:调研monorepo和微前端

news2024/9/27 15:26:10

2023年1月。因工作项目需要,调研 monorepo 、微前端等技术。

任务

一直在做的 BI 项目,随着需求迭代,模块越来越多,项目越来越复杂、臃肿。
最近,前一阶段的开发工作基本结束。新模块还在设计阶段。借此契机,调研一下前端项目拆分的技术,希望解决以下问题:

问题1

build 耗时太久。我的电脑性能一般,build一次要十几分钟。(项目使用 vite,在 dev 阶段是按需加载的,所以 dev 时启动很快。只有 build 时慢)

问题2

BI 项目中有一个数据集模块 Dataset,这个模块本身相对独立,而且在公司其他一些项目中也会用到。
现在其他开发组要使用 Dataset 时,需要把我们的项目代码全部拷过去,然后删掉用不到的东西。因为数据集模块依赖了全局的 store、component 和方法,也接受父级组件通过props或者 provide 提供的参数,所以删的时候要很小心。
每次有新项目要使用 Dataset 的时候,都要重复一遍这个操作,很麻烦。
而且后续如果 BI 中有更新涉及到了 Dataset,别的项目也很难同步这个更新。

问题3

项目使用 vue2,在开发新模块时希望技术栈不受限制,可以使用新技术,或者换技术栈(比如 vue3 ts react )

了解基本概念

monorepo

一种代码管理方式,与之并列的概念是 polyrepo

  • polyrepo 每个项目有自己的代码仓库
  • monorepo 把多个(通常是相关的)项目的代码放在一个代码仓库中

A Guide to Monorepos for Front-end Code

monorepo advantages

  • One place to store all configs and tests
  • Easily refactor global features with atomic commits
  • Simplified package publishing
  • Easier dependency management
  • Re-use code with shared packages while still keeping them isolated

monorepo disadvantages

  • No way to restrict access only to some parts of the app.
  • Poor Git performance when working on large-scale projects.

mono 和 poly 之间没有优劣之分。需要根据具体需要去选择。

注:turborepo 是实现 monorepo 的一个工具库。号称是现有的最快速、方便的 monorepo 方案。
Why TurboRepo Will Be The First Big Trend of 2022

微前端

微前端的介绍
微前端是一种项目架构方式。
微服务指把一个巨型服务,拆分成多个独立的子服务。指服务端。
微前端是相同的理念,只不过指前端领域。

qiankun 是实现微前端的一个工具库。我们项目用不了,因为 qiankun 不支持 vite 子应用。具体看 qiankun issues: vite support

从问题提出到现在近两年的时间,官方对此没有回应。
民间有一些包去实现这个需求,但代价也不小:比如没有了沙箱环境,热更新失效,发布时必须指明部署地址等。

京东的微前端库 micro-app 同样有这个问题:microapp vite支持

因为从底层设计就不兼容,所以在不改底层实现时,可以说这个问题是无法解决的:主应用使用 eval 去执行子应用的 js,eval 天生自带隔离环境(?应该是,不确定)。但 vite 打包之后仍是 esm 代码,eval 里无法处理 import export。

调研结论

微前端和 monorepo 是两个不相干的概念,不要混淆。

结论:

  1. 我们的项目不适用微前端。理由懒得细说了,看这个吧 - 你可能并不需要微前端
  2. 可以使用 monorepo。比如说:把比较独立的模块做成包。主应用是一个项目,每个独立包都是单独的项目。把这些项目都放在一个仓库中去管理。
    这里只是说可以这样做,至于到底要不要做,还需要再仔细衡量。因为这么重构,改动可能会非常大。(在我写的另一篇文章 《工作记录:bi重构》 中就提到了。在调研完之后,我在开发中尝试把 Widget 独立成包,但是工作量远超想象,不得不放弃了。)
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/399456.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

进阶C语言——数据的存储【详解】

文章目录1. 数据类型介绍1.1 类型的基本归类2. 整形在内存中的存储2.1 原码、反码、补码2.2 大小端介绍2.3 练习3. 浮点型在内存中的存储3.1 一个例子3.2 浮点数存储的规则1. 数据类型介绍 前面我们已经学习了基本的内置类型: char //字符数据类型 short //短整型 …

学习ForkJoin

学习ForkJoin一、普通解决多线程方式1、案例一2、效果图二、ForkJoin一、普通解决多线程方式 1、案例一 大数据量的List问题处理,多线程分批处理,需要解决的问题: 下标越界。线程安全。数据丢失。 private static ThreadPoolExecutor thre…

链表OJ之 快慢指针法总结

欢迎来到 Claffic 的博客 💞💞💞 前言: 快慢指针指的是每次指针移动的步长,是解决链表相关的题目的一大利器,下面我将以例题的形式讲解快慢指针法。 目录 一. 链表的中间结点 思路: 代码实…

GMP调度模型总结

优秀文章 什么是GMP调度模型 Golang的一大特色就是Goroutine。Goroutine是Golang支持高并发的重要保障。Golang可以创建成千上万个Goroutine来处理任务,将这些Goroutine分配、负载、调度到处理器上采用的是G-M-P模型。 什么是Goroutine Goroutine Golang Coro…

云舟案例︱视频孪生技术赋能城市安全综合管理场景,提升城市数智化水平

随着城市化发展进程的加快,人口不断膨胀,社会安全隐患等问题日益突出,成为困扰城市建设与管理的重要难题。针对各类社会治安突出问题,城市管理部门积极推进城市信息化建设,视频监控等各类信息化采集手段为城市数字化管…

嵌入式学习笔记——使用寄存器编程实现按键输入功能

文章目录前言模块介绍原理图编程思路前言 昨天,通过配置通用输出模式,实现了LED灯的点亮、熄灭以及流水等操作,解决了通用输出的问题,今天我们再借用最常见的输入模块,按键来实现一个按键控制LED的功能,重…

SpringBoot【知识加油站】---- REST开发

SpringBoot【知识加油站】---- REST开发1. REST 简介2. REST 风格3. RESTful 入门案例1. REST 简介 REST:Representaional State Transfer,表现形式状态转换 传统风格资源描述形式 http://localhost/user/getById?id1 http://localhost/user/saveUser…

91. 解码方法 ——【Leetcode每日刷题】

91. 解码方法 一条包含字母 A-Z 的消息通过以下映射进行了 编码 : ‘A’ -> “1” ‘B’ -> “2” … ‘Z’ -> “26” 要 解码 已编码的消息,所有数字必须基于上述映射的方法,反向映射回字母(可能有多种方法&#xff0…

Kubernetes13:Ingress

Kubernetes13:Ingress 1、把端口号对外暴露,通过ip端口号进行访问 使用Service里面的NodePort实现(Cluster、LoadBanlancer、NodePort) 2、NodePort缺陷 在每个节点上启动一个端口,在访问时候通过任何节点&#xf…

MySQL(五)锁

锁全局锁表级锁表锁元数据锁意向锁行级锁行锁间隙锁&临键锁总结计算机用锁来协调多个进程或线程并发访问某一资源。在数据库中,除传统的计算资源(CPU、RAM、I/O)的争用以外,数据也是一种供许多用户共享的资源。如何保证数据并…

业务流程图TFD和数据流程图DFD例题

业务流程图(TFD)管理业务流程图(Transaction Flow Diagram,简称TFD)用来描述系统各部门、人员之间存在的业务关系、作业顺序以及管理信息流向的图表。绘制该图使用以下四种符号:例题例题1:物资订…

【Unity逆向】玩游戏遇到的“飞天锁血”是怎么实现的?

文章目录前言什么是外挂?锁血瞬移都是怎么做的?Unity引擎的致命缺陷是什么?WEB入侵如何做到?Unity外挂攻防概述典型游戏现实应用Unity开发流程Unity工作界面打包发布方式MonoMono跨平台原理JIT方式优点:因此后期Unity发…

【数据分析师求职面试指南】实战技能部分

文章目录必备技能数据人员如何创造价值完整的指标体系构建数据监控集报表设计设计一份优质的数据分析报告基于互联网大数据的应用A B 测试用户画像完整的数据挖掘项目流程1. ​分析问题,明确目标2.模型可行性分析3.选取模型4.选择变量5.特征工程6.建立模型&效果…

大数据项目实战之数据仓库:用户行为采集平台——第4章 用户行为数据采集模块

第4章 用户行为数据采集模块 4.1 数据通道 4.2 环境准备 4.2.1 集群所有进程查看脚本 1)在/home/atguigu/bin目录下创建脚本xcall [atguiguhadoop102 bin]$ vim xcall2)在脚本中编写如下内容 #! /bin/bashfor i in hadoop102 hadoop103 hadoop104 d…

判断推理之类比推理与定义判断

考点一包含关系(一)种属关系快速判定方法:XX是一种XX。(可以用“是”来造句子)如:苹果:水果;老虎:哺乳动物(二)组成关系快速判定方法:A是B的一部分。(不可以用…

支持向量回归删除异常值Python

1、支持向量回归(SVR)原理 支持向量回归(Support Vector Regression,SVR)不仅可以用于预测,还可以用于异常值检测。其基本思路是训练一个回归模型,通过对每个数据点进行预测,并计算…

基于Transformer的目标检测算法学习记录

前言 本文主要通过阅读相关论文了解当前Transformer在目标检测领域的应用与发展。 谷歌在 ICLR2020 上提出的 ViT(Vision Transformer)是将 Transformer 应用在视觉领域的先驱。从此,打开了Transformer进入CV领域的桥梁,NLP与CV几…

软件测试11

一 Linux命令的基本格式 格式组成:命令主体 -命令选项 命令参数 常见命令形式: (1)命令主体 (2)命令主体 -命令选项 (3)命令主体 参数 (4)命令主体 -命令选项…

深入分析@Bean源码

文章目录一、源码时序图二、源码解析1. 运行案例程序启动类2. 解析AnnotationConfigApplicationContext类的AnnotationConfigApplicationContext(Class<?>... componentClasses)构造方法3. 解析AbstractApplicationContext类的refresh()方法4. 解析AbstractApplicationC…

MOV压敏电阻的几种电路元件功能及不同优势讲解

压敏电阻&#xff0c;通常是电路为防护浪涌冲击电压而使用的一种电子元器件&#xff0c;相比其他的浪涌保护器来说&#xff0c;也有那么几个不一样的优势&#xff0c;那么&#xff0c;具体有哪些&#xff1f;以及关于它的作用&#xff0c;你都知道吗&#xff1f;以下优恩小编为…