Micro‑Frontend Architecture for H5 E‑Commerce: Design, Implementation, and Progressive Upgrade

Introduction

The article introduces a micro‑frontend architecture aimed at improving the overall user experience of H5 e‑commerce platforms, standardizing cross‑team collaboration, and defining clear system boundaries. The solution has been applied to core modules such as the Indonesian M‑side cart, checkout page, personal center, and order management.

1. Background

Compared with native apps, H5 experiences suffer due to repeated resource loading and multi‑page navigation. The article explains the browser page loading process (DNS resolution, TCP handshake, request/response, HTML/CSS parsing, DOM/CSSOM construction, rendering, layout) and contrasts single‑page application (SPA) loading with traditional multi‑page approaches, highlighting SPA’s advantages for reduced load steps and shared resources.

1.2 Micro‑frontend Introduction

Two core implementation methods are described: hash‑based routing and HTML5 History API. Modern frameworks like Vue and React support these mechanisms, but traditional monolithic routing requires all modules to share a single codebase and technology stack, which becomes problematic as the system grows.

Increasing business complexity leads to challenges such as security, extensibility, and costly unified refactoring, making monolithic SPA unsuitable for large e‑commerce sites.

2. Problem Analysis

Key requirements for C‑side micro‑frontend include first‑screen rendering for SEO, handling A‑tag navigation without full page reloads, and performance of sub‑application loading.

3. Solution Design

The proposed architecture splits the system into a base application and multiple sub‑applications, each independently maintained and deployed. A BFF (Backend‑for‑Frontend) layer renders first‑screen data and provides shared resources.

3.1 Front‑end System Partitioning

Modules such as product detail, cart, and order become sub‑applications registered in the base app, preserving a single‑application navigation experience.

3.2 BFF Implementation

The Node‑based BFF supplies first‑screen data and common resources, ensuring consistent page structure.

3.3 Decentralized Architecture

Each sub‑application can act as a base, allowing direct address access and solving first‑screen rendering and initial load performance issues.

3.4 Sub‑application Loading Mechanism

The BFF provides a static resource manifest for each sub‑application. The front‑end matches required resources from the manifest and loads them on demand.

{ "appname": { "version": "v2022051101", "css": ["https://i.3.cn/appname/[version]/css/app.css"], "js": [ "https://i.3.cn/appname/[version]/js/manifest.js", "https://i.3.cn/appname/[version]/js/vendor.js", "https://i.3.cn/appname/[version]/js/app.js" ] } }

3.5 Sub‑application Switching

Two navigation methods are supported: event‑driven jumps using MicroJump and intercepted A‑tag clicks that delegate to the base router when the target is a registered sub‑application.

4. Progressive Upgrade

Step‑by‑step migration includes registering sub‑applications in the base app, adding mount/unmount methods for React or Vue entry files, and updating dynamic configuration with static resource lists and link listeners.

/** Provide jump API */ window.microAppJump = url => { const pathRoute = url ? url.replace('https://xxx.jd.com', '') : '/'; history.push(pathRoute); };

React registration example:

/** * name: sub‑app name (required) * htmlSkeleton: skeleton screen * showLoading: show loading spinner (default true) * caches: cache static resources (default true) * ... */ return ( );

Vue registration example:

let app = null; /** Micro‑frontend */ const mount = (e, h) => { app = new Vue({ el: '#appname-container', store, components: { App }, mounted() { window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset; stateStore.setItem('scrollTop', scrollTop); }); }, template: ' ' }); console.log('cart mount...'); }; const unmount = (e, h) => { app.$destroy(); app.$el.innerHTML = ''; app = null; console.log('cart unmount...'); }; if (window.__MICRO_APP_ENVIRONMENT__) { window['micro-app-appname'] = { mount, unmount }; } else { mount('appname-container'); }

Configuration JSON example for dynamic loading:

{ "linkListeners": { "appname": true }, "lib": { "js": ["https://i.3.cn/npm/[email protected]/dist/vue.min.js"] }, "modules": { "appcart": { "version": "v2022051101", "css": ["https://i.3.cn/app/appname/[version]/css/app.css"], "js": [ "https://i.3.cn/appname/[version]/js/manifest.js", "https://i.3.cn/appname/[version]/js/vendor.js", "https://i.3.cn/appname/[version]/js/app.js" ] } } }

5. Summary

When front‑end systems reach large scale, micro‑frontend architecture provides a modular, loosely‑coupled solution that clarifies dependencies, supports multiple technology stacks, enables low‑cost, low‑risk incremental upgrades, and improves SEO‑friendly first‑screen rendering for C‑side e‑commerce applications.