什么是 Tuvix.js？

Tuvix.js 是一个轻量级、框架无关的微前端编排器，用于构建由可独立部署的部分组成的可扩展前端应用程序。

问题

随着前端的增长，单体单页应用变得：

• 难以在多个团队之间扩展
• 构建和部署缓慢 - 一次更改会重建所有内容
• 绑定到单一框架或版本
• 难以隔离测试和理解

解决方案：微前端

微前端将微服务原则应用于前端。每个微应用：

• 独立开发 - 独立的代码库、独立的团队
• 独立部署 - 拥有自己的 CI/CD 流水线
• 框架无关 - 一个团队使用 React，另一个使用 Vue，还有一个使用 Svelte

Tuvix.js 提供了 shell - 在运行时加载、挂载和协调所有微应用的轻量编排层。

架构

┌─────────────────────────────────────────────┐
│                Tuvix.js Shell               │
│                                             │
│  ┌────────────┐  ┌──────────┐  ┌────────┐  │
│  │ Orchestrator│  │  Router  │  │ Loader │  │
│  └────────────┘  └──────────┘  └────────┘  │
│                                             │
│  ┌─────────┐  ┌────────┐  ┌──────────────┐ │
│  │  React  │  │  Vue   │  │   Angular    │ │
│  │  微应用  │  │  微应用 │  │    微应用    │ │
│  │         │  │        │  │             │ │
│  └─────────┘  └────────┘  └──────────────┘ │
└─────────────────────────────────────────────┘

核心概念

概念	描述
Shell	宿主应用 - 加载和协调微应用
Orchestrator	管理微应用注册和生命周期的核心引擎
Micro App	独立部署的前端应用程序
Entry	微应用的 JavaScript 包 URL
Lifecycle	每个微应用实现的 mount、unmount、update 钩子
Event Bus	微应用之间的类型化发布/订阅桥接
Sandbox	CSS + JS 隔离，防止冲突

对比

特性	Tuvix.js	single-spa	Module Federation
零运行时依赖	✅	❌	✅
内置 Event Bus	✅	❌	❌
CSS Sandbox	✅	❌	❌
SSR 支持	✅	部分	✅
TypeScript-first	✅	部分	✅
框架绑定	React, Vue, Svelte, Angular	React, Vue	任意

下一步

→ 快速开始