# Micro Frontends

> Micro-frontends & Module Federation

- Skill: `j4flmao/micro-frontends-4` (Agent Skill)
- Install (CLI): `npx skillmds@latest add j4flmao/micro-frontends-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/j4flmao/micro-frontends-4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: j4flmao (https://skillmd.com/u/j4flmao)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/j4flmao/micro-frontends-4

---

# Micro-frontends & Module Federation

## Core Architecture

Micro-frontends extend the concepts of microservices to the frontend world. Instead of a monolithic SPA (Single Page Application), the UI is composed of independent, deployable fragments.

### 1. Webpack Module Federation
Introduced in Webpack 5, Module Federation allows a JavaScript application to dynamically load code from another application at runtime. 
- **Host:** The main shell application.
- **Remote:** The micro-frontend exposing specific components or routes.
- **Shared Dependencies:** React or Lodash can be marked as shared, so the browser downloads them only once, preventing bundle bloat.

### Architecture Map

```mermaid
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
flowchart TD
    subgraph Browser ["User Browser"]
        A["App Shell (Host)"]
        B["Header Component (Remote A)"]
        C["Cart Component (Remote B)"]
    end
    
    subgraph CDN ["CDN Deployment"]
        D["Host Bundle (Webpack)"]
        E["Team A Bundle (Webpack)"]
        F["Team B Bundle (Webpack)"]
    end
    
    A -->|"Fetch Initial HTML/JS"| D
    A -.->|"Dynamic Import (Runtime)"| E
    A -.->|"Dynamic Import (Runtime)"| F
    
    E -.->|"Exposes"| B
    F -.->|"Exposes"| C
```