Umi和模块联邦MF-原理和场景一、MF方案的原理和特点 Module Federation

一、MF方案的原理和特点

Module Federation | webpack 中文文档

二、MF方案的优缺点

对比第三方仓库

优点：不需要手动更新依赖包的版本。

缺点：

（1）应用之间强耦合。

本地开发：需要开启所有的项目主应用、子应用，因为运行需要。

线上部署：健壮性受损，一个子应用挂掉，所有的应用都会挂掉。

（2）代码复用较差，灵活性很差。

如果A应用依赖B应用，我只想部署A应用的时候，仍然需要部署B应用提供共享组件。

第三方仓库只负责提供代码，不需要应用部署，就能解决这种问题

三、模块联邦的适用场景

（1）本地开发：A应用和B应用需要同时开发，A应用使用了B应用暴露的组件BTN，B应用BTN还需要微调适用于A应用。

(2) 线上部署：与本地一致。

这样可以节省了组件库需要频繁发包或者link 包的过程。

（3）其他场景：

四、umi的mfsu功能特性存在与mf功能的冲突。

mfsu介绍：juejin.cn/post/717210…

复现问题步骤：

（一）、子应用fe-resource-lib 提供共享的组件（provider身份）

//  .umirc 文件
const shared = {
  react: {
    singleton: true,
    eager: true,
  },
  'react-dom': {
    singleton: true,
    eager: true,
  },
  'antd': {
    singleton: true,
    eager: true,
  },
};

export default defineConfig({
  mfsu: true,
  mf: {
    shared,
    name: 'resourceLib',
  }
})

（二）、子应用fe-scenarios （Consumer身份）使用fe-resource-lib的共享组件

//  .umirc 文件
const shared = {
  react: {
    singleton: true,
    eager: true,
  },
  'react-dom': {
    singleton: true,
    eager: true,
  },
  'antd': {
    singleton: true,
    eager: true,
  },
};

export default defineConfig({
  mfsu: true,
  mf: {
    shared,
    remotes: [
      {
        name: 'resourceLib',
        entry: 'http://127.0.0.1:8003/remote.js',
      },
    ],
})

// src/pages/components.tsx 远程mf加载 fe-resource-lib共享组件
import ButtonLib from 'resourceLib/Button';
export default function Components(): JSX.Element {
  return <ButtonLib />
}

// 报错，React出现多实例导致