pnpm monorepo micro-app 微前端开发架构

pnpm monorepo micro-app 微前端开发架构

  • 主要解决问题
  • 微前端
    • 特性
    • 未来期许
  • 采用技术说明

主要解决问题

  • 随着项目迭代应用越来越庞大,难以维护。
  • 跨团队或跨部门协作开发项目导致效率低下的问题。
  • 单个前端部分可独立开发、测试和部署;
  • 无需重新构建即可添加、移除或替换单个前端部分;
  • 不同的前端部分可使用不同的技术构建;

微前端

核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活。更有助于技术积累。

特性

  • 不限制技术栈: 主框架不限制接入应用的技术栈,微应用具备完全自主权
  • 独立开发、独立部署: 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  • 增量升级(拓展): 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术
  • 升级或重构: 而微前端是一种非常好的实施渐进式重构的手段和策略
  • 独立运行: 每个微应用之间状态隔离,运行时状态不共享

pnpm monorepo micro-app 微前端开发架构_第1张图片
pnpm monorepo micro-app 微前端开发架构_第2张图片

未来期许

如一些导航网站,可以提供微前端的接入,我们的网站也可以入驻该网站,并且还可以提供一些API增加交互,有点类似于小程序。小程序可以调用微信的一些能力例如支付,扫码等,导航类型的网站也可以提供一些API,我们的网站接入之后提供API调用,可以实现更多更灵活的业务场景。


采用技术说明

monorepo

单代码库结构,它指的是一种软件开发方法,其中多个项目或组件存储在单个代码库中。它可以提供一个集中式的代码库和版本控制系统,可以更容易地进行协作和集成。通过 Monorepo,可以更容易地管理共享的组件、库和工具,以及更方便地进行测试、构建和部署。

pnpm 模块联邦

  • 安装速度提升,pnpm安装速度至少是npm、yarn的2倍;
  • 大幅度节省磁盘空间,pnpm包安装在一个地方,并通过链接的方式实现共享,不会在每个依赖的地方重复安装,这相对npm和yarn每个应用都要安装组件的依赖,安装大幅度节省了磁盘空间;
  • 解决了幽灵依赖问题,npm和yarn依赖包扁平化,造成了一个问题,未在package.json里显性声明的,依赖包B,由于被A依赖,扁平化依赖结构时,B被提升到了node_modules的根目录下。因此可以在项目中import或者require到B。但是一旦A被移除或者升级,就会造成B可能被移除,这时候就会报错。pnpm的依赖结构是嵌套式的,不存在这个问题;
  • 支持monorepos,pnpm内置更加完善的monorepo支持

micro-app

Micro App 微前端框架,它提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列的完善功能,最主要的是他同时支持webcomponent + qiankun sandbox 的微前端方案也支持无界ifrom的前端方案。支持vite并且它的接入成本极低,容易上手。

webpack

主程应用选择webpack是因为在现有微前端框架中,几大解决方案均兼容webpack,虽然在以webComponent+ifrom类型微前端解决方案中,以腾讯的无界、京东的micro-app。均已支持vite有更快更高的性能。单在以single-spa,webpack-module-federation为代表的,single-spa、阿里的乾坤、百度的EMP等。目前上不支持vite 虽然在各自的开发版本已经支持了。但是为了主程的可稳定性、可拓展性,目前考虑使用webpack,在主程使用nuxt 或者对版本有强制性要求也可以考虑vite。只推荐不强制。

git、git hooks、commitlint、docker

git 的检测提交 自动打包、自动发布等。

TypeScript

强类型开发阶段更稳定、规范。作为js的超级,让开发人员更早使用新的语言特性、也让开发人员更加简单的方式实现各种编程思维,比如面向对象、面相切片等等。并且作为现有流行框架的支持语言及底层实现语言。在不仅在编辑开发阶段有更好的支持,和三方框架的支持,还有更好的文档支持。

Nuxt、vue3

二者的选择在于业务的需求,一个是ssr服务端渲染、混合型渲染。一个是ssa单页面应用,对于SEO及首页加载等性能要求比较高的建议直接选择nuxt

规范:eslint、prettie

无规矩不成方圆。 一套规范的前端技术标准能大大降低团队的维护成本,也让新人快速上手,除此之外,更重要的是好的技术规范能将团队的技术能力带上正轨,向前发展。

你可能感兴趣的:(前端工程化,架构,前端,前端框架)