Webpack5 模块联邦

Webpack 5 模块联邦（Module Federation）是一个允许 JavaScript 应用程序动态地从其他构建的代码中加载代码的功能。这是一个非常有越的特性，它能够在不同的前端应用之间共享模块，即便这些应用是独立构建的，它们也能够共享和使用彼此的代码。

这样的能力对于微前端架构尤为重要，因为它允许不同团队独立部署和更新各自负责的前端应用，同时保持它们之间的接口一致性和能够互相通信。在微前端架构中，每个前端应用通常是一个独立的微服务，它们可以组合在一起形成一个完整的用户界面。

模块联邦的主要概念：

• Host：主应用，它可以消费其他应用暴露的模块。
• Remote：远程应用，它可以暴露模块给主应用使用。
• Shared：主应用和远程应用之间共享的依赖库，以避免重复加载相同的库代码。

实现步骤：

1. 配置远程应用： 在远程应用的 Webpack 配置中，使用 ModuleFederationPlugin 插件来定义哪些模块要被暴露出去，以及如何暴露。

// webpack.config.js of the remote app
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'myRemoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './MyComponent': './src/MyComponent',
      },
    }),
  ],
};

2. 配置主应用： 在主应用的 Webpack 配置中，也使用 ModuleFederationPlugin 插件来定义它需要从哪些远程应用中加载模块。

// webpack.config.js of the host app
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        myRemoteApp: 'myRemoteApp@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

3. 在主应用中使用远程模块： 在主应用的代码中，你可以动态地导入来自远程应用的模块，就像它们是本地模块一样。

// 在主应用中
const MyComponent = React.lazy(() => import("myRemoteApp/MyComponent"));

function App() {
  return (
    <React.Suspense fallback="Loading...">
      <MyComponent />
    </React.Suspense>
  );
}

模块联邦的用途：

• 微前端架构：允许不同团队独立开发和部署前端应用，同时能够共享组件和逻辑。
• 代码共享：在多个项目之间共享可重用的组件或实用程序，而不需要复制代码。
• 动态加载模块：根据需要从远程位置动态加载代码，这可以优化应用程序启动时间和性能。

模块联邦的设计和实现允许开发者更加灵活地管理前端项目之间的依赖和交互，而它的这些优势在大型前端项目和微服务架构中尤为明显。

原文链接：https://juejin.cn/post/7343138637973110825 作者：程序员晚天