跳转到内容
View in the app

A better way to browse. Learn more.

彼岸论坛

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[程序员] 谈谈大家对微前端的看法

发表于

一个项目,有首页,搜索页,购买流程,账号页面,售后流程。 总代码 40 万行。除掉单测,快照,大概 20 万行。几十个前端开发协同工作。 React 项目,有完善的懒加载机制,服务端渲染。Router + Redux 。 由于公司收购,新公司的架构变更,这个项目要迁移到新的仓库,新的云供应商,新的项目外部依赖。 有人提议使用微服务来重新按 domain (首页,搜索这些)对这个项目使用微前端的概念来重构基础框架。 虽然是不同的 domain ,但是它们有相同的基础组件依赖,有公共逻辑依赖,状态在 Redux 。传统,规规矩矩。

下面是我个人在团队内提出的看法:

  • 项目虽然有不同的 domain ,但是有公共逻辑和组件,使用微服务会导致公共逻辑重复。因为微服务的概念和模块联邦不一样,微服务是一个自洽的服务,它可以独立运行,所以它必须有完整的逻辑和依赖。这意味着,拆分出的微服务需要重复很多逻辑,会带来很大的维护负担。
  • 我们不像门户网站,不同的 tab 对应不同的功能,可以根据 tab 拆分服务。比如,机票 tab 是机票团队的页面。酒店 tab 是酒店页面。它们完全是不同的服务。几乎没有公共业务逻辑(日志这些不算)。我们的服务没有 tabs 的概念。
  • 主应用和子应用,子应用和子应用之间的状态传递会导致逻辑和 debug 的复杂度指数级上升。加大了开发的心智负担。很多团队不止工作于一个 domain ,而是交叉的。
    • 这里我们考虑多一点。我们使用 styled-component ,所以 CSS 的隔离是一定要的。否则 id 会重复。
    • 既然拆分了,那就意味着我们需要独立部署每个微前端,每个微前端就需要照顾自己的服务端逻辑,比如预热,比如服务端数据请求。我们现在的拆包已经可以达到“浏览器只需要请求需要的 bundles”的目的了。所以独立部署带来的好处不大。
    • Redux 的状态共享,我们需要额外的机制来实现微前端的状态共享。
  • 严格考虑是否提升了用户体验和浏览器端性能。没有,反而降低了性能。增加了重复的逻辑和代码量,增加了资源消耗,复杂度增加。
  • 微前端本身是为了屏蔽不同技术栈,在同一页面展示和共享状态的,我们的服务本来就是一个整体服务。所有的公共逻辑都是一样的。
  • 虽然微前端可以让我们渐进式的迁移,但是后期整合带来的效率低,和复杂度的问题也是需要严格审视的。

学识尚浅,有核心的东西没有考虑到吗?我不知道该用什么来作为辅助验证我说法的东西。

Featured Replies

No posts to show

创建帐户或登录来提出意见

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.