微前端概念

微前端是一种将大型前端应用拆分为多个独立、自治、可单独开发和部署的“小应用”的架构理念，借鉴了后端微服务的思想。每个子应用可以使用不同的技术栈，拥有自己的生命周期、状态和路由。

💡 主要理念

• 技术栈无关React、Vue、Angular 等都能共存。
• 独立开发与部署团队可并行工作，发布不相互影响。
• 按需加载与组合展示主应用根据路由动态加载子应用，提高首屏性能。
• 状态隔离每个子应用拥有自己的作用域，避免全局变量冲突。
• 主从架构主应用负责容器和路由分发，子应用专注业务展示。

常用实现方式

IFrame 方案

• 优点：浏览器原生隔离，样式/JS 完全隔离；缺点：无法共享状态；UI 同步困难，跨域复杂；性能低下，
• User Pain Point：*你需要在不同子应用之间共享使用者登录信息，却只能通过复杂的跨窗口通信来实现。*

JavaScript 沙箱方案

• 优点：Dynamically load resources via JS sandbox;good performance;supports multiple frameworks.
• 缺点：Caching issues if same module loaded by different micro frontends;potential global variable leakage.
• User Pain Point：*你发现不同团队使用同一第三方库导致版本冲突，维护成本飙升。*

Webpack Module Federation方案

• 优点：Synchronous sharing of modules at build time;按理说，reduces bundle size.
• 缺点：Able only when all teams agree on shared dependencies;less flexible at runtime.
• User Pain Point：*你想逐步迁移从 Vue2 到 Vue3，但所有子应用必须同步升级才能使用 MF。*

主流框架案例对比

Qiankun——阿里开源实现

主应用注册子应用示例： import { registerMicroApps,start } from 'qiankun';话说回来，registerMicroApps(。{ /* lifecycle hooks */});start，

子应用生命周期示例： export async function bootstrap { console.log;} export async function mount { /* render */ } export async function unmount { /* cleanup */ }

public-path.js 用于动态设置

至于跨域配置建议，在 devServer 或 nginx 添加 CORS header。

Micro App——基于 WebComponent 的实现方式

主应用通过 标签注册子应用，并提供 router、props 等信息。

No界——结合 iframe 与 WebComponent 实现隔离

User Pain Point:* 当需要在不同页面间共享数据时你必须手动通过 props 或 eventBus 来传递，而不是直接访问全局状态。* 主/子间通信示例：

// 主
bus.$emit;// 子
window.$wujie?.bus.$on，

常见痛点与解决思路

再看一句话。微前端让“大房子”拆成若干“独立小房间”，既能让各团队自由装修，又能最终拼成一个完整且可维护的“家”。不过，但要想真正发挥优势，需要细致规划隔离机制、通信协议还有共享依赖策略。以免陷入技术债务与性能瓶颈之中。