微前端架构概述

微前端将大型前端应用拆分为多个独立子应用，各自独立开发、部署。

微前端核心概念

特点	说明
独立开发	子应用独立仓库开发
独立部署	子应用独立发布上线
技术栈无关	子应用可用不同框架
增量升级	渐进式升级子应用

微前端架构类型

类型	说明
iframe	最简单，完全隔离
Web Components	标准化组件封装
Module Federation	模块共享与联邦
Single-SPA	路由级子应用

Vite 在微前端中的角色

场景	Vite 作用
子应用构建	构建独立子应用产物
开发调试	子应用独立开发环境
模块共享	Module Federation 支持

注意：Vite 子应用可独立开发，也可集成到主应用。

iframe 微前端

HTML

<!-- 最简单的微前端 -->
<iframe src="https://app-a.example.com"></iframe>
<iframe src="https://app-b.example.com"></iframe>

优点：完全隔离缺点：性能差、通信复杂

Single-SPA 集成

JavaScript

// 主应用配置子应用
import { registerApplication } from 'single-spa'

registerApplication({
  name: '@company/app-a',
  app: () => System.import('@company/app-a'),
  activeWhen: '/app-a'
})

Vite 构建子应用

JavaScript

// 子应用 vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: 'src/main.js',
      formats: ['system'],  // Single-SPA 格式
      fileName: 'main'
    }
  }
})

微前端优势

优势	说明
独立迭代	子应用独立升级
团队分工	不同团队维护子应用
技术升级	渐进式升级技术栈
复用代码	子应用可复用

微前端挑战

挑战	解决方案
样式隔离	CSS Modules / Shadow DOM
状态共享	全局状态 / 事件通信
路由协调	主应用路由分发
依赖重复	Module Federation

要点总结

微前端拆分大型应用为独立子应用
Vite 构建独立子应用产物
Module Federation 实现模块共享
各子应用独立开发部署

📝 发现内容有误？点击此处直接编辑