gez

gez

Gez 基于 Rspack 编译,通过 importmap 将模块映射到具有强缓存,基于内容哈希的 URL 中。

Stars: 584

Visit
 screenshot

Gez is a high-performance micro frontend framework based on ESM. It uses Rspack compilation and maps modules to URLs with strong caching and content-based hashing. Gez embraces modern micro frontend architecture by leveraging ESM and importmap for dependency management, providing reliable isolation with module scope, seamless integration with any modern frontend framework, intuitive development experience, and optimal performance with zero runtime overhead and reliable caching strategies.

README:

Gez Logo

Gez

🚀 基于 ESM 的高性能微前端框架

npm npm npm

Gez 基于 Rspack 编译,通过 importmap 将模块映射到具有强缓存、基于内容哈希的 URL 中。

📚 文档:简体中文

💫 拥抱现代微前端

是时候告别过去,拥抱真正的微前端架构了。

在过去的几年里,微前端架构一直在寻找一条正确的道路。然而,我们看到的是各种复杂的技术方案,它们用层层包装和人工隔离来模拟一个理想的微前端世界。这些方案带来了沉重的性能负担,让简单的开发变得复杂,让标准的流程变得晦涩。

🔧 旧世界的枷锁

传统微前端方案的种种限制,正在阻碍我们前进的步伐:

  • 性能噩梦:运行时注入依赖、JS 沙箱代理,每一次操作都在消耗宝贵的性能
  • 脆弱的隔离:人工打造的沙箱环境,始终无法企及浏览器原生的隔离能力
  • 复杂的构建:为了处理依赖关系,不得不魔改构建工具,让简单的项目变得难以维护
  • 定制的规则:特殊的部署策略、运行时处理,让每一步都偏离了现代开发的标准流程
  • 有限的生态:框架耦合、定制API,让技术选型被迫绑定在特定的生态中

🌟 新时代的曙光

Web 标准的进化为我们带来了新的可能。现在,我们可以用最纯粹的方式构建微前端:

  • 回归原生:拥抱 ESM 和 importmap,让依赖管理回归浏览器标准
  • 天然隔离:模块作用域提供了最可靠的隔离,无需任何额外的运行时开销
  • 开放共赢:任何现代前端框架都能无缝接入,技术选型不再受限
  • 开发体验:符合直觉的开发模式,熟悉的调试流程,一切都那么自然
  • 极致性能:零运行时开销,可靠的缓存策略,让应用真正轻量起来

⚡️ 核心优势对比

核心特性 Gez 传统微前端框架
依赖管理 ✅ ESM + importmap 原生加载
✅ 基于内容哈希的强缓存
✅ 中心化管理,一次生效
❌ 运行时注入,性能损耗
❌ 缓存策略不可靠
❌ 依赖版本冲突风险
应用隔离 ✅ ESM 原生模块隔离
✅ 零运行时开销
✅ 浏览器标准特性保障
❌ JS 沙箱性能开销
❌ 复杂的状态维护
❌ 隔离实现不稳定
构建部署 ✅ Rspack 高性能构建
✅ 开箱即用配置
✅ 增量构建,按需加载
❌ 构建配置繁琐
❌ 部署流程复杂
❌ 全量构建更新
服务端渲染 ✅ 原生 SSR 支持
✅ 支持任意前端框架
✅ 灵活的渲染策略
❌ SSR 支持有限
❌ 框架耦合严重
❌ 渲染策略单一
开发体验 ✅ 完整 TypeScript 支持
✅ 原生模块链接
✅ 开箱即用的调试能力
❌ 类型支持不完善
❌ 模块关系难以追踪
❌ 调试成本高

🎯 示例项目

一个完整的 HTML 服务端渲染示例,展示了如何使用 Gez 构建现代化的 Web 应用:

  • 🚀 基于 Rust 构建的 Rspack,提供极致的构建性能
  • 💡 包含路由、组件、样式、图片等完整功能支持
  • 🛠 快速的热更新、友好的错误提示和完整的类型支持
  • 📱 现代化的响应式设计,完美适配各种设备

展示基于 Vue2 的微前端架构,包含主应用和子应用:

主应用:

  • 🔗 基于 ESM 导入子应用模块
  • 🛠 统一的依赖管理(如 Vue 版本)
  • 🌐 支持服务端渲染

子应用:

  • 📦 模块化导出(组件、composables)
  • 🚀 独立的开发服务器
  • 💡 支持开发环境热更新

这个示例展示了:

  1. 如何通过 ESM 复用子应用的组件和功能
  2. 如何确保主子应用使用相同版本的依赖
  3. 如何在开发环境中独立调试子应用

基于 Preact + HTM 的高性能实现:

  • ⚡️ 极致的包体积优化
  • 🎯 性能优先的架构设计
  • 🛠 适用于资源受限场景

所有示例都包含完整的工程配置和最佳实践指南,帮助你快速上手并应用到生产环境。查看 examples 目录了解更多详情。

📚 版本说明

v3.x - 开发阶段

当前版本基于 Rspack 构建,提供更优的开发体验和构建性能。

已知问题

  • ESM 模块导出优化中:modern-moduleexport * 语法存在稳定性问题 #8557

v2.x - 不推荐生产使用

此版本不再推荐用于生产环境,建议使用最新版本。

v1.x - 已停止维护

原名 Genesis,是 Gez 的前身。不再接受新功能和非关键性 bug 修复。

📄 许可证

本项目采用 MIT 许可证。

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for gez

Similar Open Source Tools

For similar tasks

For similar jobs