关于前端:常见的-Monorepo-框架大比较

47次阅读

共计 2694 个字符,预计需要花费 7 分钟才能阅读完成。

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

前言

明天这篇文章次要来比拟一下目前比拟风行的 Monorepo 框架。

Turborepo

首先是 Turborepo,上次的文章中只提到 Turborepo 的应用形式,明天这篇文章就来提提 Turborepo 的相干观点吧!

Truborepo 是一套相当轻量的且能够疾速建设出 Monorepo 架构的框架,这套框架是由一位很有名气的工程师 Jared Palmer 开发,后续也是由鼎鼎大名的 vercel 团队进行保护。

尽管 Turborepo 是 2021 年才问世的算是相当新的一个框架,后续可能会有许多问题以及待优化我的项目须要解决,不过毕竟人家背地有 vercel 在帮忙,所以读者其实是能够放心使用的不必放心 XD

而 Turborepo 一共有以下几种个性:

  • Faster, incremental builds:更快的 build 速度。
  • Content-aware hashing:主动查看我的项目内所有文件进行 build,而不是利用 timestamp 的形式来决定哪些文件是须要 build 的。
  • Cloud caching:能够分享 cloud build caching 来减速 CI/CD 的构建。
  • Parallel execution:无效利用所有 CPU 外围的性能,不会节约閒置 CPU 的性能。
  • Task pipelines:定义 task 的关系,让 Turborepo 能够最佳化的决定这些 task 的 build 机会。
  • Pruned subsets:藉由建设 subset 来减速 Platform as a Service(Paas) 的 deploy 效力。
  • Convention-based config:利用 JSON file 来升高複杂度。

有了以上几点个性让 Turborepo 能够成为一套既容易上手又能够兼具我的项目性能的好用的 Monorepo 框架。

Nx

Nx 是一套相当好用的 Monorepo 框架,自身内置相当多好用的工具提供给开发者应用,此框架也是最多人拿来跟 Turborepo 比拟。

相较于 Turborepo,Nx 是从 2018 年问世,所以整体来说肯定有更好的优化以及更好的开发体验,接下来笔者会一一介绍几个笔者在应用此框架时有用到的好用工具,读者如果后续有想要玩玩看 Nx 的话无妨也能够试试看这些性能。

  • Local computation caching:本地端读取,缓存曾经 build 过的内容,让后续在 build 的过程中不用再花工夫 build 先前的文件,藉此减速我的项目整体 build 的工夫。
  • Project graph visualization:互动式图形化界面,让开发者能够疾速晓得我的项目间彼此的相依性,也能够藉此查看是否有 repo 援用了谬误的 repo。

这件事在 Turborepo 中如果要达到必须要装置一个叫 Graphviz 的工具,且此工具只能生成图案无奈产生互动式界面。

  • task coordination:工作协调,能够同步进行我的项目 repo build 的 task 藉此达减速整个 build 的流程,具体的内容会在下方介绍 Lerna 的时候一併介绍给读者

除了以上这几点个性外,笔者认为 Nx 还有一个个性做得比 Turborepo 好,在终端机的显示上 Nx 给人一种高深莫测的感觉,能够晓得有哪些文件正在 build 而且也有色彩上的辨别。

除了终端机的显示差异外,在 build 的工夫上拜 local caching 所赐,Nx 也是赢过 Turborepo 的。

Lerna

Lerna 这套 Monorepo 框架相较于下面提到的 Nx 以及 Turborepo 来说能够说是最老牌的,是从 2015 年开始问世的,而 Lerna 蕴含的货色十分多能够说是奠定了一套最残缺的 Monorepo 架构的根底。

Lerna 提供了相当多的 command 能够应用,其中最重要的两个 command 别离是 lerna bootstrap 以及 lerna publish,想理解更多 command 的读者能够参考官网,笔者只会单纯介绍这两个好用的 command。

  • lerna bootstrap:用来连结我的项目内的 dependencies。
  • lerna publish:用来公布 updated package。

还记得下面提到的 task coordination 吗?Lerna 其实没有比拟优化的 task coordination 流程,必须要一个 task 实现后能力执行下一个 task,如果我的项目内的 repo 有相依性的问题,这时候整体的 build 工夫就会拉得很长。

然而 Turborepo 以及 Nx 都有完满做到 task coordination 的成果,下图为 task coordination 的简略事例,置信读者应该能够马上感触进去整体在 build 的过程中的时间差。

不过 Lerna 在最新的 v5 版本中退出了不少元素,最大的特点莫过于能够跟 Nx 联合并且应用一些 Nx 才有的性能,例如:Local computation cachingProject graph visualization 甚至是 task coordination 等等,让 Lerna 不会被时代的推动而淘汰。

应用的形式也很简略,只有将根目录下的 lerna.json 中加上 useNx: true 这个条件即可应用 Nx 的性能,当然读者也要记得装置 Nx 能力真的应用这些性能喔。

总结

这次文章介绍了在 React 中比拟支流的三大 Monerepo 框架,这三个框架彼此都有各自的优缺点,所以没有相对的好用跟不好用,所有都能够取决于本人的爱好来做抉择喔!

不过因为笔者本人自身是写 React 的,也用了不少 Vercel 团队的工具,例如 Next.js、swr 等,所以一开始笔者接触的 Monorepo 框架也是先从 Turborepo 开始,但用著用著后续也感觉 Nx 更好用一些所以就打算写一篇文章来比拟各个常见的 Monorepo 框架了,心愿能藉此帮忙到跟我一样有抉择阻碍的读者 XD

编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者:Andy Chen 译者:小智 起源:medium

原文:https://medium.com/tarbugs/%E…

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0