360 Secure SkillHub
360 安全技能中心

Micro-Frontend Architecture

核心功能是提供微前端架构全流程指导，含Module Federation、qiankun等框架选型建议，及应用边界设计、跨应用通信、样式隔离、独立部署等方案。典型场景包括设计微前端架构、拆分单体应用、解决框架兼容与样式冲突等，输入需求后输出对应实施步骤与参考文档指引。

goldath
goldath
热度 35.59
最近更新 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.

Micro-Frontend Architecture

Framework Selection

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

Core Workflow

  1. Design → Define app boundaries, shared dependencies, routing strategy
  2. Setup → Configure main app shell + sub-apps (see framework-specific refs)
  3. Communication → Choose communication pattern (see references/communication.md)
  4. Style Isolation → Prevent CSS conflicts (see references/style-isolation.md)
  5. 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