微前端方案选型

前端飞行手册2025/11/16大约 3 分钟

当前主流的微前端方案主要可以分为三大流派：基座式运行时方案、构建时模块联邦、服务端拼接方案。

icestark：阿里开源微前端框架

主流方案概览

方案名称	Stars	来源	社区活跃
qiankun	~15000	蚂蚁金服	中等
single-spa	~12600	国际开源	中等
Micro-App	~4900	京东	高（持续活跃）
无界 (Wujie)	~3400	腾讯	较高（新兴）
Module Federation	N/A	Webpack 5	高
Cloudflare 片段架构	N/A	N/A	N/A

接入成本于迁移难度对比

方案名称	接入成本	迁移难度	对vite支持	对vue支持
qiankun	⭐⭐ ⭐ 中高	⭐ ⭐ ⭐ 高	需要插件	✅优秀
single-spa	⭐ ⭐ ⭐ ⭐ 高	⭐ ⭐ ⭐ ⭐ 高	较差	✅支持
Micro-App	⭐ 极低	⭐ 极低	✅原生支持	✅优秀
无界 (Wujie)	⭐ ⭐ 较低	⭐ ⭐ 较低	✅支持	✅优秀
Module Federation	⭐ ⭐ ⭐ 中等	⭐ ⭐ ⭐ 中等	需要插件	✅支持
Cloudflare 片段架构	⭐ ⭐ ⭐ ⭐ 高	⭐ ⭐ ⭐ ⭐ 高	✅支持	✅支持

改造内容对比

micro-app：主应用只需引入micro-app标签，子应用几乎零改造。
qiankun：需要改造生命周期、静态资源路径、路由系统、工程化配置
无界：配置主应用路由，子应用轻微改动
Module Federation：升级webpack5，配置模块联邦插件
single-spa：手动配置生命周期，自行实现沙箱和隔离

JS 隔离对比

方案名称	隔离方式	安全性
qiankun	Proxy 沙箱	⭐⭐⭐⭐
micro-app	with + Proxy	⭐⭐⭐⭐
无界 (Wujie)	iframe 原生隔离	⭐⭐⭐⭐⭐⭐ 完全隔离
Module Federation	webpack 模块	⭐⭐⭐
single-spa	需自实现	⭐⭐

CSS 隔离对比

方案名称	隔离方式	效果
qiankun	动态样式 + scoped	⭐⭐⭐ 可能泄露
micro-app	shadow dom	⭐⭐⭐⭐⭐⭐ 完全隔离
无界 (Wujie)	iframe	⭐⭐⭐⭐⭐⭐ 完全隔离
Module Federation	需自实现	⭐无隔离
single-spa	需自实现	⭐无隔离

方案对比

方案名称	类型	核心原理	优点	缺点	适用场景
qiankun	基座式 (运行时)	基于 single-spa，通过 JS 沙箱和样式隔离加载子应用	成熟稳定、文档丰富、沙箱隔离性强	配置相对复杂、对 Vite 支持需插件	企业级中后台、需要严格隔离的老项目迁移
Micro-App	基座式 (运行时)	基于 Web Components，实现资源劫持与样式隔离	接入成本低、首屏性能好	样式隔离可能被部分CSS穿透	渐进式迁移、Vue3项目
无界 (Wujie)	基座式 (运行时)	基于优化后的 iframe 和 Web Components	极致隔离、零改造成本	通信机制相对复杂	金融、政务等高安全、高敏感需求场景
Module Federation	构建时	Webpack 5 / Vite 原生能力，实现模块共享	性能极致、开发体验好	样式隔离需自行处理、对团队规范要求高	技术栈统一的新项目、高绩效内网工具
Cloudflare 片段架构	服务端	利用边缘计算，在服务器端并行渲染和流式拼接片段	首屏性能极佳、高可扩展性	厂商绑定、技术较新	全球化应用、对首屏加载和SEO有极致要求的场景

主应用和子应用都是vue，避免资源重复加载的方案

推荐实现方式使用External + CDN + 全局变量，预期效果如下：开发环境通过全局变量共享，无需网络。生成环境通过cdn + 浏览器缓存实现性能优化。

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  chainWebpack(config) {
    config.externals({
      vue: 'Vue',
      'vue-router': 'VueRouter',
      'element-plus': 'ElementPlus',
      vuex: 'Vuex',
      axios: 'axios',
  }
}

子应用来源验证

// 主应用：验证子应用来源
const allowedOrigins = ['http://localhost:3000', 'http://localhost:8080']

microApp.start({
  // 只允许特定来源的子应用
  beforeLoad(app) {
    const url = new URL(app.url)
    if (!allowedOrigins.includes(url.origin)) {
      throw new Error(`不允许加载来自 ${url.origin} 的子应用`)
    }
  }
})

链接

基于Umi的微前端实践

阿里的 icestark 微前端方案

深扒阿里开源的微前端架构 icestark