版本管理、部署与编排
使用语义化版本独立部署远程应用,管理共享库冲突,并协调发布
版本管理、部署与编排 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
独立部署:核心价值
Module Federation 的主要价值在于独立部署:团队可以更新、测试并部署远程应用,而无需与宿主应用团队协调,也不会触发宿主应用重新部署。宿主应用下次从远程应用的网址加载 remoteEntry.js 时,会自动获取这些更改。
远程网址版本化
不要将 remoteEntry.js 固定在一个每次部署都会变化的网址上,而应在网址中加入内容哈希:remoteEntry.[hash].js。这样每次部署都是不可变的——旧网址仍会继续工作,而宿主应用更新到新部署后会引用新的哈希。不可变网址支持积极的 CDN 缓存。
基础设施层的功能标记
由于宿主应用通过网址发现远程应用,您可以在基础设施层实现 A/B 测试:向不同用户提供不同的 remoteEntry.js 网址(指向不同的远程版本)。这样无需在应用代码中加入任何功能标记逻辑,就能真正为微前端实现金丝雀部署。
灵活发现的清单方案
宿主应用不必在 Webpack 配置中硬编码远程网址,而是可以在启动时获取一个 JSON 清单:GET /federation-manifest.json 会返回 { buttonApp: 'https://cdn.example.com/button/remoteEntry.abc123.js' }。要更新宿主应用使用的版本,只需更新清单即可,无需重新构建宿主应用。
通过更新清单回滚
当远程部署引入回归问题时,回滚可以立即完成:更新 federation-manifest.json,使其指向之前的 remoteEntry.js 网址。宿主应用会在下一个请求周期立即开始使用旧版本。无需重新构建宿主应用,无需回滚宿主应用,也无需协调。
Webpack 模块联邦 2.0
模块联邦 2.0(@module-federation/enhanced 软件包)带来了多项重要改进:通过从远程清单自动生成类型来提供更好的 TypeScript 支持,用于自定义加载逻辑的运行时插件接口,以及增强的共享作用域管理,以应对复杂的版本协商场景。
Vite 的 vite-plugin-federation
vite-plugin-federation 软件包将模块联邦引入基于 Vite 的项目,使用与 Webpack 的 ModuleFederationPlugin 类似的配置接口。它同时兼容 Vite 远程模块和 Webpack 宿主(反之亦然),让团队可以逐步迁移到 Vite,而不必放弃模块联邦。
运行时动态远程模块
对于高度动态的架构,您可以完全在运行时配置远程 URL:import(remoteRegistry[featureName]),其中 remoteRegistry 由一次 API 调用填充。这样便可实现插件式架构,无需重新构建外壳应用,就能添加新的微前端。
作为编排器的外壳应用
外壳应用的主要工作是编排:读取远程清单,初始化模块联邦运行时,按照命名路由注册远程模块,并根据当前 URL 渲染相应的远程模块。外壳应用有意保持轻量——它知道要加载什么,而不知道如何渲染它。
在生产环境中监控模块联邦
将性能监控添加到远程加载中:用 try/catch 包装远程导入,以优雅地处理加载失败(远程模块不可用时渲染回退界面);测量下载 remoteEntry.js 和组件分块所需的时间;如果远程加载时间超过阈值则发出警报(这表明 CDN 可能存在问题)。
完整的 CI/CD 流水线
成熟的模块联邦 CI/CD 流水线如下:远程团队提交代码 → CI 构建远程模块 → 将不可变的 remoteEntry.[hash].js 上传到 CDN → 更新 federation-manifest.json → 宿主在下一次用户请求时获取新的远程模块。每一步均已自动化,宿主团队无需参与远程部署。
模块联邦回滚策略
回滚一次有问题的模块联邦远程部署,最快的方法是什么?
课程回顾
模块联邦支持真正的独立部署:远程模块无需重新构建宿主,宿主会自动发现新版本。请使用包含内容哈希的远程 URL,以实现 CDN 的不可变缓存;使用动态清单,以灵活地路由版本并立即回滚。vite-plugin-federation 将这些能力带到了 Vite 中,而动态远程导入则支持插件式架构。外壳应用负责编排远程加载,并有意保持轻量。
用 AI 导师学习 React — 免费
在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。
- 课程
- 88
- 课程
- 324
常见问题解答
「版本管理、部署与编排」课时是免费的吗?
是的 — 「版本管理、部署与编排」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 React Academy 课程的其余内容,请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「版本管理、部署与编排」这节课中我会学到什么?
使用语义化版本独立部署远程应用,管理共享库冲突,并协调发布 你通过在浏览器中直接运行的动手代码来练习 React Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。
「版本管理、部署与编排」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗?
能。每节 React Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。