logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 开始
      介绍
      快速上手
      版本升级
      名词解释
      技术栈
      核心概念
      页面入口
      构建工具
      Web 服务器
      基础功能
      路由
      路由基础
      配置式路由
      数据管理
      数据获取
      数据写入
      数据缓存
      渲染
      服务端渲染(SSR)
      服务端流式渲染(Streaming SSR)
      渲染缓存
      静态站点生成(SSG)
      渲染预处理 (Render Preprocessing)
      样式开发
      引入 CSS
      使用 CSS Modules
      使用 CSS-in-JS
      使用 Tailwind CSS
      HTML 模板
      引用静态资源
      引用 JSON 文件
      引用 SVG 资源
      引用 Wasm 资源
      调试
      数据模拟(Mock)
      网络代理
      使用 Rsdoctor
      使用 Storybook
      测试
      Playwright
      Vitest
      Jest
      Cypress
      路径别名
      环境变量
      构建产物目录
      部署应用
      进阶功能
      使用 Rspack
      使用 BFF
      基础用法
      运行时框架
      扩展 BFF Server
      扩展一体化调用 SDK
      文件上传
      跨项目调用
      优化页面性能
      代码分割
      静态资源内联
      产物体积优化
      React Compiler
      提升构建性能
      浏览器兼容性
      配置底层工具
      源码构建模式
      服务端监控
      Monitors
      日志事件
      指标事件
      国际化
      基础概念
      快速开始
      配置说明
      语言检测
      资源加载
      路由集成
      API 参考
      高级用法
      最佳实践
      自定义 Web Server
      专题详解
      模块联邦
      简介
      开始使用
      应用级别模块
      服务端渲染
      部署
      集成国际化能力
      常见问题
      依赖安装问题
      命令行问题
      构建相关问题
      热更新问题
      已下线功能
      📝 编辑此页面
      上一页自定义 Web Server下一页开始使用

      #简介

      模块联邦(Module Federation)是一种 JavaScript 应用分治的架构模式,它允许你在多个 JavaScript 应用之间共享代码和资源。

      在这种分治的模式下,可以帮助你提升应用程序的性能,增强代码可维护性等。

      #Module Federation 2.0

      Module Federation 作为 Webpack 5 推出的重磅功能,自发布以来已经三年有余。在今年,字节跳动与 Module Federation 的作者 @Zack Jackson 以及社区成员共同推出了 Module Federation 2.0。

      Module Federation 2.0 基于字节跳动内部实践以及 Module Federation 原有社区生态,解决了原先版本中的诸多问题。

      在字节跳动内部,基于 Modern.js 的框架已经与 Module Federation 2.0 进行了深度集成。我们正在逐步将这些功能集成到 Modern.js 中,希望与社区开发者共同探索未来。

      Info

      参考 Module Federation 2.0 发布 获取更多相关内容。

      #Modern.js MF 插件

      基于字节跳动内部实践,Module Federation 团队官方提供了 Modern.js 插件,帮助开发者更方便的使用 Module Federation。

      插件会识别当前构建引擎(Webpack 或 Rspack),在 Modern.js 应用中注入 Module Federation 对应插件,并自动处理构建配置、添加运行时代码等。

      同时,插件还支持在 Modern.js SSR 应用中使用 Module Federation,提供更好的性能体验。

      详细内容可以参考 使用 Module Federation、Module Federation 服务端渲染。

      #应用维度模块

      应用级别模块是具备应用的框架渲染能力及路由能力,能像应用一样运行的模块。应用级别模块是在微前端框架中非常重要的能力,提供跨应用框架(React、Vue)加载和渲染的能力,支持加载带路由的模块。

      Module Federation 2.0 提供了 Bridge 的能力,用于加载应用级别模块。

      Modern.js 基于 Brdige 和自身内部实现提供了 API,可以非常简单的导出应用级别模块。详细内容可以参考 应用级别模块。