MicroFrontend Implementation in Business Context
The article outlines ZanSpa, a progressive micro‑frontend framework built for Youzan’s backend redesign, detailing its core RouteMonitor and PageLoader modules that handle navigation and resource assembly, and explains why runtime composition was chosen over build‑time integration after evaluating solutions such as qiankun.
本文介绍了有赞微商城后台改造中的微前端方案,主要设计思路如下图所示。其中核心模块为 RouteMonitor 和 PageLoader 两部分,分别负责路由导航和子页面资源的解析组装。
目前业界已经产出了一些优秀的微前端方案,比如热门的基于 single-spa 的 qiankun。在分析了这些微前端方案的实现,并结合团队内的现状后,我们实现了自己的渐进式微前端方案—— ZanSpa(命名就是这么简单朴素)。主要设计思路如下图所示:
其中核心模块为 RouteMonitor 和 PageLoader 两部分,分别负责路由导航和子页面资源的解析组装。好了,有了整体的印象,接下来会依次介绍各个主要模块和流程的实现。
1、子页面组合方式:包含构建时组合和运行时组合,既然是低成本接入,基于已有的业务独立打包的形式,同时能做到真正的技术栈无关跟独立部署,运行时组合自然成了我们的首选。
2、子页面拆分:开始前,我们对现有的页面加载流程做一些简单分析。...
Youzan Coder
Official Youzan tech channel, delivering technical insights and occasional daily updates from the Youzan tech team.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.