Building a Scalable Micro‑Frontend Architecture with Tangram‑SDK

Background

The iFanFan team adopted a micro‑service backend and needed to split their monolithic web front‑end into independent codebases that could be developed, tested, deployed, and released autonomously while presenting a seamless, consistent UI to users.

Initial Approach and Problems

Initially, the team used an iframe ‑based integration, which caused slow switching, poor modal coverage, and complex inter‑app communication. They required a solution that preserved fluid user experience, consistent interaction style, and developer convenience similar to single‑page applications.

Proposed Solution

3.1 Routing Resolution

The main application stores all menus, acts as a container, and parses routes to locate the corresponding sub‑application and its resources. Existing Vue‑router guards are extended to load the appropriate component dynamically, e.g., accessing /s1/aa loads https://xx.cdn.com/s1/s1_aa.js.

3.2 Packaging Sub‑Applications per Route

Each route becomes a separate Webpack entry, producing distinct js and css bundles. A script reads the project's route definitions, aggregates them, and injects them into the Webpack config. Common code is extracted into common.js and third‑party libraries into vendor.js, which are pre‑loaded before route‑specific assets.

3.3 Enabling Independent Development of Sub‑Applications

Sub‑applications are packaged as npm dependencies and imported by the main project. During compilation, the main entry HTML and JS are reused, allowing sub‑apps to run locally with the same routing logic while using a test‑environment CDN for external resources.

3.4 Version‑Driven Resource Address Management

A simple timestamp‑based versioning scheme is applied globally, avoiding per‑file hashes. The timestamp updates automatically on each release, enabling fast runtime lookup of the correct resource URLs.

3.5 Isolation and Communication Between Apps

Apps communicate via postMessage, local storage, or a global Vue event bus and store. Isolation relies on namespace conventions for global objects, storage keys, and CSS scopes rather than strict sandboxing.

Unified Engineering Solution

4.1 Command‑Line Tool (tangram‑sdk)

All the above solutions are packaged into a CLI tool named tangram‑sdk, which provides:

Micro‑frontend compilation and packaging rules

Local development server configuration

Automatic global configuration updates for new modules

Extensible build configuration

Mock data and API integration

Project scaffolding

Cloud deployment capabilities

The tool also standardizes project management, dependency handling, shared UI libraries, code style, unit testing, and build pipelines.

4.2 CI/CD Integration

The solution is integrated into CI/CD pipelines, ensuring sub‑applications are deployed under a unified directory, triggering configuration updates, and automating environment‑specific deployments.

4.3 Multi‑Product Support

The same micro‑frontend framework powers several production products within the iFanFan ecosystem, demonstrating its scalability.

Performance Optimizations

5.1 Load‑Time Optimizations

Static assets are served directly from CDN, bypassing the gateway.

Cloud‑native deployment enables compression, HTTPS, and CDN acceleration.

On‑demand loading of third‑party libraries reduces bundle size.

Separate caching strategies for stable third‑party resources and frequently changing business code.

Critical pages load asynchronously to improve first‑paint.

Sub‑applications use preload for parallel resource fetching.

5.2 Runtime Optimizations

Virtualized lists and tables improve rendering of large datasets.

Lazy loading of long pages and API calls reduces initial load.

Core framework components are instantiated eagerly; non‑core components are lazy‑loaded.

Summary

The iFanFan micro‑frontend framework has been stable in production, offering advantages such as a single Vue instance for fast navigation, high component reuse, low context‑switch cost for developers, and automated version management. Its main drawback is the difficulty of evolving the underlying technology stack due to the single‑instance architecture. Future work plans to adopt the Qiankun framework to enable smoother upgrades while preserving stability and improving resource and component reuse.