Micro-Frontend Architecture

开发编程

微前端架构设计与实现指南。使用场景：在设计微前端架构、选择 Module Federation / qiankun / single‑SPA 等方案时。

前端开发

357

下载量

安装量

收藏量

★ 5.0

综合评分ⓘ

概述

更多信息

Micro-Frontend Architecture#

Framework Selection#

ScenarioRecommendedNew project, Webpack 5Module FederationLegacy jQuery/Vue2 migrationqiankunMulti-framework coexistencesingle-spaNeed JS sandbox + style isolationwujie

Core Workflow#

Design → Define app boundaries, shared dependencies, routing strategy
Setup → Configure main app shell + sub-apps (see framework-specific refs)
Communication → Choose communication pattern (see references/communication.md)
Style Isolation → Prevent CSS conflicts (see references/style-isolation.md)
Deploy → Independent CI/CD per sub-app (see references/deployment.md)

References#

references/module-federation.md — Webpack Module Federation config & patterns
references/qiankun.md — qiankun registration, sandbox, lifecycle hooks
references/single-spa.md — single-spa root config & app registration
references/communication.md — Props, CustomEvent, shared store patterns
references/style-isolation.md — Shadow DOM, CSS Modules, scoped strategies
references/deployment.md — Independent deploy, CDN, versioning strategy