一、模块联邦

模块联邦 (Module Federation) 是 Webpack 5 中的一个新特性，它允许将多个 Webpack 应用程序打包成一个整体，并在运行时动态加载和卸载模块 。这使得开发人员可以将大型应用程序分解成更小的模块，并独立开发和部署这些模块。

模块联邦的主要功能包括:

  • 代码共享: 允许多个应用程序共享代码和资源，从而减少代码冗余并提高开发效率。
  • 动态加载: 允许在运行时动态加载和卸载模块，从而提高应用程序的灵活性和性能。
  • 远程依赖: 允许应用程序加载来自远程服务器的模块，从而实现模块的按需加载。

模块联邦的应用场景:

  • 微前端: 可以使用模块联邦将大型前端应用程序分解成更小的微前端应用程序，并独立开发和部署这些微前端应用程序。
  • 共享组件库: 可以将共享组件库构建成一个模块联邦应用程序，并将其部署到远程服务器，然后其他应用程序可以动态加载该组件库。
  • 多模块应用程序: 可以使用模块联邦将多模块应用程序打包成一个整体，并在运行时动态加载和卸载模块，从而提高应用程序的灵活性和性能。

1.1 模块联邦的示例

以下是一个简单的模块联邦示例，其中包含两个应用程序:

  • 主应用程序: 主应用程序负责加载和卸载子应用程序。
  • 子应用程序: 子应用程序是一个独立的 Webpack 应用程序，可以被主应用程序动态加载。
// 主应用程序
import { ModuleFederationPlugin } from 'webpack';

const config = {
  entry: './main.js',
  output: {
    filename: 'main.js',
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        './sub-app': 'http://localhost:3000/sub-app.js',
      },
    }),
  ],
};

export default config;

// 子应用程序
import { ModuleFederationPlugin } from 'webpack';

const config = {
  entry: './sub-app.js',
  output: {
    filename: 'sub-app.js',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'sub-app',
      library: { type: 'var', name: 'subApp' },
      exposes: {
        './component': './component.js',
      },
    }),
  ],
};

export default config;

在该示例中，主应用程序可以通过以下方式加载子应用程序:

const subApp = await import('http://localhost:3000/sub-app.js');

// 使用子应用程序中的组件
const component = subApp.component;

二、vite 相关

更多内容，待补充…

参考

最后， 希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

微信公众号

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！