Skip to main content

浅学一下 webpack5 module federation

· 3 min read

背景​

在一个大中台项目中，怎么高效高性能的将多个子项目互相嵌入？

熟知的微前端解决方案有 micro-app、qiankun、webpack5 module federation 等等。

那 webpack5 module federation 是什么、如何使用、它的原理是什么呢？

本文将一一揭晓。

module federation 是什么​

module federation 译为模块联邦，意思是模块可以在多个应用之间互相使用，应用 a 可以导出模块，也可以使用应用 b 导出的远程模块。

module federation 就是微前端的一种，而这种微前端和 micro-app、qiankun 等微前端框架确有本质的区别。

颗粒度的定义：

  • module federation：多个互相独立的模块聚合；
  • qiankun：多个互相独立的应用聚合。

技术实现：

  • module federation：打包的 chunk 的聚合；
  • qiankun：打包的 main.js 的聚合。

如何使用​

在 webpack5 项目中新增 module federation plugin 配置。

配置项如下：

  • name：应用名称，当作为 remote 引用时，路径为 name/expose；
  • library：声明全局变量的方式，name 为 umd 的 name；
  • filename：构建输出的文件名；
  • remotes：远程引用的应用名及其别名的映射，使用时以 key 值作为 name；
  • exposes：被远程引用时可暴露的资源路径及其别名；
  • shared：与其他应用之间可以共享的第三方依赖；
    • requiredVersion: 依赖的版本；
    • singleton: 仅允许共享范围内的单个版本；
    • eager: 允许在初始块中使用这个共享模块。

项目 1 的配置：

new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remote1: 'remote1@[remote1Url]/remoteEntry.js',
        libs: 'libs@[libsUrl]/remoteEntry.js',
      },
    })

项目 2 的配置：

new ModuleFederationPlugin({
  name: 'remote1',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/Button',
  },
  remotes: {
    libs: 'libs@[libsUrl]/remoteEntry.js',
  },
})

通过 module federation 实现了项目 1 的 Button 组件在项目 2 的聚合。

示例 demo 见：https://github.com/jiaozitang/mf-demo。

原理​

module federation 远程模块 remotes 和共享模块 shared 都是异步 chunk，通过 import 动态引入，实现按需加载。

小结​

module federation 的应用场景有限，因为它仅仅是模块的聚合，不具备应用之间的隔离性。

通常适用于多个应用依赖不同组件库的组件的场景。

这些组件库将组件通过 module federation 暴露，应用通过 module federation 引入远程组件。

参考资料​