浏览器原生微前端：基于 Import Maps 的零依赖架构实战

无需 Qiankun、Single-SPA用浏览器原生能力构建微前端前言为什么我们不需要重型微前端框架市面上的微前端方案Qiankun、Single-SPA、Module Federation都很强大但也带来了包体积增加基础库 30KB运行时开销JS Sandbox、样式隔离的性能损耗概念复杂度需要理解生命周期、通信机制、沙箱原理本文介绍一种纯浏览器原生能力实现的微前端方案适合以下场景技术栈统一的团队如全 Vue3 或全 React 18对包体积敏感的项目希望渐进式迁移的遗留系统核心方案Import Maps 原生 ES Modules1. Import Maps 动态加载子应用!-- 主应用 index.html -- script type\importmap\\u003e { \imports\: { \vue\: \https://cdn.jsdelivr.net/npm/vue3/dist/vue.esm-browser.js\, \app-dashboard\: \http://localhost:3001/dist/app.js\, \app-user\: \http://localhost:3002/dist/app.js\ } } /script\u003e2. 动态加载器实现// micro-loader.js export class MicroAppLoader { constructor() { this.apps new Map(); } async load(name, container) { if (this.apps.has(name)) { return this.apps.get(name); } const app await import(/* vite-ignore */ name); if (app.mount) { await app.mount(container); } this.apps.set(name, app); return app; } }子应用规范设计子应用需要暴露标准接口// 子应用 main.js let app null; export async function mount(container) { app createApp(App); app.mount(container); } export async function unmount() { app?.unmount(); }状态共享基于 BroadcastChannel 的跨应用通信// 使用 BroadcastChannel API同域名下 const channel new BroadcastChannel(\micro-app-bus\); // 发送消息 channel.postMessage({ type: \USER_LOGIN\, data: userInfo }); // 接收消息 channel.onmessage (event) { console.log(\收到消息:\, event.data); };方案对比维度原生 Import Maps 方案Qiankun包体积0KB30KB运行时开销无有沙箱开销技术栈限制需统一支持任意样式隔离需约定自动沙箱适用场景统一技术栈异构系统结语这种原生方案不是为了取代 Qiankun而是提供一种轻量级替代方案当你不需要沙箱隔离当你希望减少运行时开销当你想深度理解微前端本质讨论话题你会在生产环境使用这种原生方案吗你觉得沙箱隔离是必须的吗还有哪些浏览器原生 API 可以用于微前端