#介绍

#什么是 Esmx？

基于 ECMAScript Modules (ESM) 的微前端框架，支持高性能服务端渲染（SSR）。

技术演进：

• v1.0：HTTP 请求实现组件按需加载
• v2.0：Webpack Module Federation 实现应用集成
• v3.0：浏览器原生 ESM 的模块链接系统

核心特性概览：

• 零运行时开销的微前端架构
• 原生 ESM 模块系统支持
• 多框架兼容性（Vue、React、Preact、Solid 等）
• 完整的服务端渲染能力

#为什么选择 Esmx？

#零运行时开销

• 基于浏览器原生 ESM + ImportMap，无需沙箱代理
• 无运行时依赖注入和性能损耗
• 原生模块隔离，保障应用运行时稳定性

#原生 ESM 支持

• 使用标准 ECMAScript 模块语法
• 浏览器原生模块加载机制
• 基于 Import Maps 的依赖管理
• 内容哈希的强缓存策略

#多框架兼容性

• 支持 Vue、React、Preact、Solid、Svelte 等主流框架
• 框架中立的设计理念
• 无需修改现有组件代码
• 灵活的技术栈选择

#高性能构建

• 基于 Rspack 驱动的构建工具
• 显著提升构建速度
• 支持 ESM 热更新
• TypeScript 原生执行支持

#核心概念

#ESM 模块系统

• 标准模块语法：使用 import/export 标准语法
• 静态分析：支持编译时的静态模块分析
• 按需加载：浏览器原生的模块按需加载能力
• 循环引用：原生支持的循环引用处理

#Import Maps

• 依赖映射：将模块标识符映射到具体 URL
• 版本管理：支持多版本依赖共存
• 缓存控制：基于内容的强缓存策略
• 兼容性：通过 es-module-shims 提供向后兼容

#模块链接

• 跨应用共享：实现不同应用间的模块共享
• 静态链接：构建时确定模块依赖关系
• 类型安全：完整的 TypeScript 类型支持
• 开发友好：支持热更新和开发时调试

#应用隔离

• 模块作用域：利用 ESM 原生模块作用域
• 样式隔离：CSS 模块和作用域样式支持
• 状态隔离：独立的应用状态管理
• 错误边界：应用级别的错误隔离机制

#解决的问题

#传统微前端痛点

• 性能损耗：运行时依赖注入和沙箱代理带来性能开销
• 隔离局限：自研沙箱不如浏览器原生模块隔离能力
• 构建依赖：依赖共享需要改造构建工具
• 部署复杂：部署策略与 Web 标准相悖
• 技术锁定：框架耦合限制技术栈选择

#Esmx 的解决方案

• 原生方案：浏览器 ESM 和 Import Maps 管理依赖
• 标准隔离：ECMAScript 模块作用域实现隔离
• 框架无关：支持多种前端框架混合开发
• 零开销：完全基于浏览器标准，无运行时开销

#性能对比

特性	传统方案	Esmx
运行时开销	有沙箱代理开销	零开销
模块隔离	人工沙箱模拟	浏览器原生
构建复杂度	需要特殊配置	标准构建流程
学习成本	框架特定 API	标准 ESM 语法