Micro Frontend Architecture Guide: Building Scalable Large-Scale Frontend Applications

Micro Frontend Architecture: Past and Present

Micro frontends are an architectural pattern that brings microservices concepts to frontend development. It splits a large frontend application into multiple independently developed and deployed small applications, allowing each team to independently own their business domain and choose their own tech stack. This concept was first proposed by ThoughtWorks in 2016 and quickly gained adoption in large enterprises.

According to the 2025 State of Micro Frontends survey, over 43% of mid-to-large enterprises are already using micro frontend architecture in production, with e-commerce platforms, enterprise management systems, and SaaS products being the most common use cases. The core value of micro frontends lies in solving the problems that arise as monolithic frontend applications grow in scale, such as declining development efficiency, deployment coupling, and team collaboration difficulties.

1. Core Challenges of Micro Frontends

1.1 Technology Selection Dimensions

1.2 Applicable Scenarios

• Large admin/backend systems: Multiple business lines iterate independently, avoiding deployment conflicts
• Multi-team collaboration projects: Each team independently owns feature modules
• Gradual migration: Old systems progressively refactored, coexisting with new during transition
• Multi-tech stack coexistence: Different teams using different frameworks (React/Vue/Angular)

2. Major Implementation Solutions

2.1 Module Federation (Webpack 5)

Module Federation is a micro frontend solution built into Webpack 5, allowing one JavaScript application to dynamically load code modules from another application at runtime.

// Host application configuration
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

2.2 qiankun (Based on Single-SPA)

qiankun is an open-source micro frontend framework from Ant Group, built on Single-SPA, providing out-of-the-box sandbox isolation and application lifecycle management.

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react-app',
    entry: '//localhost:7100',
    container: '#subapp-container',
    activeRule: '/react',
  },
  {
    name: 'vue-app',
    entry: '//localhost:7200',
    container: '#subapp-container',
    activeRule: '/vue',
  },
]);

start({ sandbox: { experimentalStyleIsolation: true } });

3. Key Implementation Points

3.1 Style Isolation

• Use CSS Modules or styled-components to avoid style conflicts
• Set CSS namespace prefixes
• Use Shadow DOM for true isolation

3.2 State Management

• Cross-application communication via custom events
• Use shared stores (e.g., multiple Redux store instances)
• Pass simple state via URL parameters

3.3 Performance Optimization

• Extract common dependencies as shared modules
• Load sub-applications on demand, avoid loading too many on first screen
• Preload sub-applications with high access probability

4. Summary

Micro frontend architecture provides an effective organizational approach for large frontend projects, enabling multi-team independent development and deployment. When choosing a solution, consider team tech stack, project scale, and isolation requirements. It's recommended to start with Module Federation or qiankun, as they have mature ecosystems and active communities. Remember, the purpose of architecture is to solve problems, not create them — only introduce micro frontends when truly needed.