Understanding single-spa: Core Principles, Lifecycle Management, and Integration with qiankun

The article explores the principles of single-spa, a JavaScript micro‑frontend framework, and shows how it underpins the qiankun solution.

Background: A unified operation platform requires shared login state, technology‑stack independence, independent deployment, and seamless navigation between modules.

Problems to solve: shared login, stack‑agnostic, independent maintenance, and user‑experience parity with single‑app routing.

Relationship: qiankun is built on top of single-spa; understanding single-spa is prerequisite for mastering qiankun.

What is single-spa: It aggregates multiple SPA applications, allowing different frameworks to coexist without page reload, supporting independent deployment and lazy loading.

Core API – registerApplication: registers a child app with four parameters (appNameOrConfig, appOrLoadApp, activeWhen, customProps). Example code: registerApplication('myApp', async () => { /* load script */ return window['singleCapacity']; }, () => location.pathname.startsWith('/vue'), { /* props */ })

Lifecycle handling: single-spa expects each child to expose async bootstrap, mount, unmount (and optionally unload) functions, which are invoked by the framework during routing changes.

Routing mechanism: start() triggers reroute(), which evaluates activeWhen rules, loads required apps via loadApp, and calls lifecycle functions (bootstrap, mount, unmount) based on URL changes, hashchange, popstate, and patched pushState/replaceState.

Code flow: getAppChanges determines which apps should be active; loadApps registers micro‑tasks to fetch scripts; performAppChanges orchestrates unmounting, loading, and mounting; reasonableTime finally calls the specific lifecycle hook.

Integration with frameworks: single-spa-react, single-spa-vue, single-spa-angular, etc., provide wrappers that map framework‑specific mount/unmount to the generic lifecycle. Example Vue wrapper code: export function mount(props) { return vueLifecycles.mount(props); }

Conclusion: While single-spa requires manual lifecycle wiring, qiankun abstracts this complexity, offering out‑of‑the‑box isolation, CSS/JS sandboxing, and easier configuration.