返回

模块联邦让你真正掌握应用间的共享与热更新

前端

我们知道，Webpack 可以通过 DLL 或 Externals 做代码共享时 Common Chunk，但是不同应用和项目间，这个任务就变得困难了，几乎无法实现项目之间的按需热插拔。模块联邦是 Webpack 5 新内置的一个重要功能，可以让跨应用间真正做到模块共享，实现灵活的应用间热更新。

模块联邦的优势

模块联邦的主要优势在于：

  • 跨应用代码共享 ：模块联邦允许你在多个应用程序之间共享代码，避免重复开发，提高开发效率。
  • 按需热更新 ：模块联邦支持按需热更新，这意味着只有更改了共享模块的代码时，才会触发热更新，不会影响其他应用程序。
  • 隔离性和独立性 ：模块联邦中的每个应用程序都是独立的，不会影响其他应用程序的运行。

如何使用模块联邦

要使用模块联邦，需要在每个应用程序中进行一些配置。

  1. 安装 Webpack 5
npm install webpack@5 --save-dev
  1. 配置 Webpack

在每个应用程序的 webpack 配置文件中，添加以下配置：

module.exports = {
  ...
  plugins: [
    new webpack.container.ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
    }),
  ],
  ...
};
  1. 创建共享模块

在每个应用程序中，创建共享模块。共享模块是其他应用程序可以导入的模块。

// app1/src/sharedModule.js
export function greet(name) {
  return `Hello, ${name}!`;
}
  1. 在其他应用程序中导入共享模块

在其他应用程序中，可以使用以下方式导入共享模块：

// app2/src/main.js
import { greet } from 'app1/remoteEntry.js';

console.log(greet('John')); // Hello, John!

模块联邦的局限性

模块联邦虽然是一个非常有用的功能，但也存在一些局限性：

  • 复杂性 ：模块联邦的配置和使用都比较复杂，需要一定的学习成本。
  • 兼容性 ：模块联邦只支持 Webpack 5，其他构建工具不支持。
  • 性能 ：模块联邦可能会降低应用程序的性能，尤其是当共享模块比较大的时候。

总结

模块联邦是 Webpack 5 的一个重要功能，可以让你跨多个应用程序共享代码，实现按需热更新。模块联邦有很多优点，但也存在一些局限性。如果你正在开发跨多个应用程序的项目，那么模块联邦是一个值得考虑的工具。