结论：Module Federation 本质是加载异步 Chunk

前置知识

• Module Federation 基本使用
• 异步 Chunk 加载原理

基础概念

容器

任何暴露远程模块的一次构建，都可以视为一个容器。

容器可以嵌套使用，也可以引用其它容器的模块，容器之间可也可以依赖循环

容器的创建基于在 Webpack 声明的 entry

生产者

导出模块的容器

消费者

引用外部模块的容器

环境配置

生产者

// home.js
export const remote1 = {
    word: 'home'
}

// Webpack Config
new webpack.container.ModuleFederationPlugin({
  // MF 应用名称
  name: 'app1',
  // MF 模块入口
  filename: `remoteEntry.js`,
  // 定义应用导出哪些模块
  exposes: {
    './home': './src/home',
  }
})

消费者

// 入口文件
const {remote2} = (await import("app1/home"))
console.log(remote2)

// Webpack Config
new webpack.container.ModuleFederationPlugin({
  remotes: {
    app1: 'app1@<http://localhost:8080/remoteEntry.js>',
  }
})