跳到主要内容

ModuleFederationinWebpack5

Module Federation in Webpack5

在使用Module Federation的时候, 每个应用块都是一个独立的构建, 这些构建都会被编译为容器.

容器可以被其他的应用或者其他的容器 引用

一个被引用的容器被称为remote, 引用者被称为host, remote暴露模块给host, host则可以使用这些暴露的模块, 这些模块被称为remote 模块

概览

这里有两个概念: 暴露模块和共享模块

  • 容器通过异步的方式暴露模块.
  • 你在使用容器的模块之前, 请求容器加载你想要的模块.
  • 异步暴露模块允许构建结果将不同的暴露模块和他们的依赖一起, 放在不同的文件中, 从而实现按需加载
  • 容器依旧将不同的模块一起打包
  • 会使用webpack的chunk机制(vendor分割或者创建一个文件包含不同暴露模块之间的公共依赖等). 这就能帮助我们降低请求数量和下载大小.

容器的消费者(应用)需要能处理异步加载暴露出来的模块(同步的import代码语义不变, 运行时转换为异步加载)

每一个部分, 容器, 应用都可以在共享的scope中, 添加共享模块, 同时也可以从共享scope中, 加载共享模块. 共享scope将会通过给每个消费者提供版本要求内的最大可用版本的方式, 对共享模块进行冗余剔除

Everygreen

  • 总是使用最新发布版本的容器
  • 整个应用无需额外的测试和预上线步骤

Managed

  • 应用应当锁定所有使用的容器的版本
  • 升级容器的版本需要一些步骤
  • 在应用界别应当测试版本升级
  • 应用需要若干的发布步骤