每日优鲜供应链微前端改造

一、需求以及成果

我所在团队是做toB业务的，技术栈是Vue，团队目前有十多个典型的toB业务（菜单+内容布局），这些业务都是服务于一个大平台的，因为历史原因，每个业务都是独立的，都有一个html入口，所以当用户在这个大平台上使用这十多个业务的时候，每当切换系统时，页面都会刷新，体验很差；在开发层面，这十多个业务又有太多共同之处，每次修改成本都很高。

最近有一个很重要的需求X，内容是这样的：从十多个项目中，每个项目抽取若干功能组成一个新项目，基于现有架构的话，每当点击来自不同系统的功能页面就要刷新一次，这是不可接受的。为了新需求X重复开发一遍这些业务功能又不现实，所以从技术角度来看，架构改造不可避免。

经过一番调研比对，我们决定使用当下比较火的 SingleSpa 来完成改造（iframe方案尝试过，不太适合我们的场景），目前改造已完成，我们实现了以下效果：

• 只有一个不包含子项目（子项目指的是那十多个业务）资源的主项目，主项目只有一个html入口，子项目通过主项目来按需加载，子系统间切换不再刷新；
• 菜单栏、登录、退出等功能都从子项目剥离，写在主项目里，再有相关改动只需修改主项目，包括错误监控、埋点等行为，只需处理一个主项目，十几个子项目不再需要处理；