Micro‑Frontend Implementation and Monorepo Management for Large‑Scale Frontend Projects

Background: Two large legacy data‑platform applications caused performance issues due to excessive files and dependencies; a progressive split and migration to micro‑frontend was required.

What is Micro‑Frontend

Micro‑frontend is an architectural pattern that decomposes a front‑end into independent small applications or modules that can be developed, deployed and maintained by separate teams.

Technology Selection

We evaluated Qiankun (Alibaba), Micro‑App (JD) and Wujie (Tencent). Qiankun offers strong community, compatibility and documentation but has complex configuration; Micro‑App is lightweight, Vite‑friendly and cross‑platform but newer with a smaller ecosystem; Wujie provides plugin‑style extensibility but has a learning curve and limited features.

Overall we chose JD’s Micro‑App for its lightweight nature and Vite compatibility.

Micro‑Frontend Application Design

Main Application Page Structure

Designed five functional areas: sub‑application entry, sub‑app menu bar, tab area, workspace list, and user info/logout.

Permission Design

Unified permission via data‑platform workspace; use window.__MICRO_APP_ENVIRONMENT__ to detect if running inside the main app; share user state via localStorage or token query parameters; handle login expiration with window.microApp.location .

Sub‑Application Refactoring

Static resources: convert relative paths to absolute using publicPath (webpack) or base (vite) based on environment variables.

Routing: isolate routes by app key and prepend main‑app base route using ${window.__MICRO_APP_BASE_ROUTE__ || ''}${subAppPrefix} .

Main Application Configuration

Register sub‑apps via Micro‑App custom elements, pass baseroute attribute, and configure a global plugin to map missing globals to window .

Data Communication

Use postMessage to broadcast data changes; main and sub apps listen for messages to trigger re‑render.

Monorepo Management Strategy

Adopt a monorepo using Turborepo for task orchestration and caching, combined with pnpm for dependency management.

Evaluated pnpm workspace, Rush, and Turborepo; selected Turborepo for its simplicity and caching capabilities.

Turborepo Features

Incremental builds via hash‑based caching reduce build time by up to tenfold; pipelines express task dependencies, enabling parallel execution across CPU cores.

Packaging Tools

Use Vite for new apps, Webpack for legacy; npm packages are bundled with tsup (esbuild‑based) for fast, zero‑config builds.

Monorepo Conventions

Standardize Git commit messages, branch names, tags, and automate checks with simple‑git‑hooks; manage versioning and changelogs with Changesets.

Build and Deployment

Build per application using filter; Dockerfiles and Jean platform handle deployment, selecting versions based on branch/tag prefixes.

Conclusion and Outlook

Micro‑frontend combined with monorepo improves team collaboration, development speed, build efficiency, and overall quality; future work includes private Turborepo cache, sub‑app resource pre‑loading, Tailwind style extraction, and continued splitting of legacy applications.