Micro-Frontend Architecture

提供微前端架构设计与实施指导：按场景在 Module Federation、qiankun、single-spa、wujie 之间选型，覆盖应用边界划分、主应用与子应用搭建、跨应用通信、样式隔离与子应用独立部署，并配六份参考文档给出配置模式与步骤。

热度 35.61

最近更新 2026-05-11 17:41:20

分类：开发依赖：纯提示词应用场景：代码生成 / DevOps / 工作流

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add micro-frontend-arch

Metadata

name: micro-frontend-arch
description: Micro-frontend architecture design and implementation guide. Use when: designing micro-frontend architecture, choosing between Module Federation/qiankun/single-spa/wujie, splitting monolith into sub-apps, implementing style isolation, setting up inter-app communication, or deploying micro-frontends independently.

Scenario	Recommended
New project, Webpack 5	Module Federation
Legacy jQuery/Vue2 migration	qiankun
Multi-framework coexistence	single-spa
Need JS sandbox + style isolation	wujie

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/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