Frontend Development 17 min read

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.

Youzan Coder
Youzan Coder
Youzan Coder
MicroFrontend Implementation in Business Context

本文介绍了有赞微商城后台改造中的微前端方案,主要设计思路如下图所示。其中核心模块为 RouteMonitor 和 PageLoader 两部分,分别负责路由导航和子页面资源的解析组装。

目前业界已经产出了一些优秀的微前端方案,比如热门的基于 single-spa 的 qiankun。在分析了这些微前端方案的实现,并结合团队内的现状后,我们实现了自己的渐进式微前端方案—— ZanSpa(命名就是这么简单朴素)。主要设计思路如下图所示:

其中核心模块为 RouteMonitor 和 PageLoader 两部分,分别负责路由导航和子页面资源的解析组装。好了,有了整体的印象,接下来会依次介绍各个主要模块和流程的实现。

1、子页面组合方式:包含构建时组合和运行时组合,既然是低成本接入,基于已有的业务独立打包的形式,同时能做到真正的技术栈无关跟独立部署,运行时组合自然成了我们的首选。

2、子页面拆分:开始前,我们对现有的页面加载流程做一些简单分析。...

microfrontendfrontend architecturepage loaderroute monitoringZanSpa
Youzan Coder
Written by

Youzan Coder

Official Youzan tech channel, delivering technical insights and occasional daily updates from the Youzan tech team.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.