基于 Vite 的模块联邦插件@originjs/vite-plugin-federation提供了一种去中心化的微前端架构实现方式,实现了组件路由的跨应用共享和动态加载.说实话，这种方式挺酷的！

咱就是说在实际项目中，我们经常遇到多应用共享组件的需求，怎么样才Neng实现呢？用 Webpack 的模块联邦实现多应用运行时共享组件，这是一个不错的选择。

在我们之前的项目中，我们采用了「NPM 发包、iframe 子应用」的方式，但是这种方式有hen多问题，比如说：发包流程复杂、iframe 加载慢等。

害，那个那个时候我们就想，有没有一种方式Ke以实现多应用共享组件，而且要尽量少耦合发版节奏——中台发版不Neng绑死活动页的发版。

模块联邦是 Webpack 5 内置的Neng力,让多个独立构建、独立部署的应用,在运行时像用本地模块一样加载彼此的代码.换句话说:多应用共享组件成了刚需,而且要尽量少耦合发版节奏。

我们落地的形态是:设计系统单独一个应用作为 Remote,打包并部署remoteEntry.js;中台、活动页、kan板等作为 Host,在需要的地方import,运行时从 CDN 拉取设计系统的 chunk，和本地代码一起跑在同一页面里。

我们需要在 Webpack 配置文件中添加ModuleFederationPlugin插件。

const { ModuleFederationPlugin } = require.container;// Remote 的 webpack 配置片段new ModuleFederationPlugin;

output.publicPath 必须Neng让 Host 正确拼出所有 chunk 的完整 URL，否则运行时会报错。

publicPathRemote 上线后若没配对，Host 拉 chunk 会报错，我们是在 CI 里把 Remote 的 publicPath 打成当前 CDN 前缀。

shared 版本Host 和 Remote 的 requiredVersion 要兼容，否则可Neng加载两份 React，导致 hook 报错；我们统一用 ^. 并锁大版本。

CORSRemote 的静态资源要允许业务域名的 origin，我们 Nginx 里对 remoteEntry.js 和 chunk 加了对应 Access-Control-Allow-Origin.

落地模块联邦之后：设计系统单独发版、单独部署,各业务应用不用改依赖、不用重新装包,,刷新页面即可拿到Zui新组件；多应用共享组件、发版解耦这两个目标dou满足了。后续我们也在部分场景下用同一套机制Zuo了「活动页作为 Remote、中台作为 Host」的集成，实现了一应用既可当 Host 也可当 Remote.

模块联邦通过简化微前端架构中的代码共享机制,为现代Web应用的开发和维护提供了一种高效且灵活的解决方案.

易于维护和 :模块联邦的松耦合特性使得添加或移除微应用变得简单快捷.

你kan，模块联邦是不是一个挺不错的技术方案？哈哈！咱就是说有了它，我们就Ke以轻松实现多应用共享组件，而且还不用担心发版节奏的问题，你懂的！

.不对不对，应该是... 总之呢，模块联邦是一种非常有用的技术，它Ke以帮助我们geng好地实现微前端架构，提高开发效率和代码质量.