Vite 也可以模块联邦

前言

之前写过一篇文章，《将 React 应用迁移至 Vite》介绍了 Vite 的优势，并且和 webpack 做对比，但 webpack5 有个很重要的功能，就是模块联邦，那么什么是模块联邦？Vite 中也可以实现吗？我们一起来探究下。

什么是模块联邦？

Module Federation 中文直译为“模块联邦”，而在 webpack 官方文档中，其实并未给出其真正含义，但给出了使用该功能的 motivation，即动机，翻译成中文

多个独立的构建可以形成一个应用程序。这些独立的构建不会相互依赖，因此可以单独开发和部署它们。这通常被称为微前端，但并不仅限于此。

原文在这里：module-federation，并且给出了stackblitz 在线运行链接

这个是一个基于 lerna 的 monorepo 仓库， app1 和 app2 是并行启动的，分别运行在 3001 和 3002 端口上。

但在 app1 中却可以直接引用 app2 的组件

现在，直接修改 app2 中组件的代码，在 app1 中就可以同步更新。

此处需要点击下刷新按钮，因为 2 个应用启动在 2 个端口上，所以不会热更新。

结合以上，不难看出，MF 实际想要做的事，便是把多个无相互依赖、单独部署的应用合并为一个。通俗点讲，即 MF 提供了能在当前应用中加载远程服务器上应用模块的能力，这就是模块联邦（Module Federation）。

模块联邦解决了什么问题

我们要在多个应用直接实现模块共享，我们原来是怎么做的？

发布 npm 组件

npm 是前端的优势，也是前端之痛，一个项目只依赖了 1 个 npm 包，而在 node_modules 却有无数个包，若是纯粹的基础组件发布 npm 包还可以，因为不常改动，若一个模块涉及业务，发布 npm 包就会变得很麻烦，比如一个常见的需求，需要给每个应用加上客服聊天窗口。这个聊天窗口会随着 chat services的改动而变化，当 chat 这个组件改变时，我们就会陷入 npm 发布 ——> app 升级 npm 包 -> app 上线 这样的轮回之中，而在现实场景中，我们会采用另一种方式。

Iframe

Iframe 是另一种方案，可以将 chat 做一个 iframe 嵌入到各个应用中，这样只需要升级 chat 一个应用，其他应用都不用改动。但 iframe 也有缺点，首先使用 iframe 每次打开组件，DOM 树都会重建，所以打开速度较慢。其次 iframe 跨应用通信使用 window.postMessage 的方式，若应用部署在不同的域名下，使用 postMessage 需要控制好 origin 和 source 属性验证发件人的身份，不然可能会存在跨站点脚本漏洞。

而 MF 很好地解决了多应用模块复用的问题，相比上面的这 2 中解决方案，它的解决方式更加优雅和灵活。

如何配置模块联邦

MF 引出下面两个概念：

Host：引用了其他应用模块的应用, 即当前应用
Remote：被其他应用使用模块的应用，即远程应用

在 webpack 中配置

无论是当前应用还是远程应用都依赖 webpack5 中的 ModuleFederationPlugin plugin

作为组件提供方，需要在 plugins 中配置如下代码

const { ModuleFederationPlugin } = require('webpack').container
const path = require('path')

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3002,
  },
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      // 远程组件的应用名称
      name: 'app2',
      // 远程组件的入口文件
      filename: 'remoteEntry.js',
      // 定义需要导出的组件列表
      exposes: {
        './App': './src/App',
        './Component': './src/component',
      },
      // 可以被共享的模块
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
}

shared 本地模块和远程模块共享的依赖。
singleton 表示共享作用域中共享模块使用当前的版本（默认情况下禁用）。一些库使用全局内部状态（例如 react、react-dom）。因此，对一次只能运行一个库实例是至关重要的。

在当前应用中，也就是作为组件的使用方，需要在 webpack.config.js 中配置如下代码：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ModuleFederationPlugin } = require('webpack').container
const path = require('path')

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3001,
  },
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      // 当前应用名称
      name: 'app1',
      // 远程应用加载js入口列表
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      //共享的模块
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
}

本地模块需配置所有使用到的远端模块的依赖；远端模块需要配置对外提供的组件的依赖。

最后一步需要将入口文件改为异步加载。

比如原先的入口文件 index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))

将index.js要修改为异步加载

+ import('./bootstrap');
- import React from 'react';
- import ReactDOM from 'react-dom';
- import App from './App';
- ReactDOM.render(<App />, document.getElementById('root'));

重命名原先的 index.js 为 bootstrap.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))

const RemoteApp = React.lazy(() => import('app2/App'))

这样在 app1 中就可以只有引用 app2 中的组件了。

在 vite 中配置

MF 提供的是一种加载方式，并不是 webpack 独有的，所以社区中已经提供了一个的 Vite 模块联邦方案: vite-plugin-federation，这个方案基于 Vite(Rollup) 也实现了完整的模块联邦能力。

Vite 模块联邦 stackblitz 在线运行链接打开这个示例，请按 readme 命令依次运行，由于 Vite 是按需编译，所以 app2 必须先打包启动， 2 个 App 无法同时是开发模式。

配置步骤

首先需要安装 @originjs/vite-plugin-federation

app1 当前应用： vite.config.js配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'app1',
      remotes: {
        app2: 'http://localhost:3002/assets/remoteEntry.js',
      },
      shared: ['react'],
    }),
  ],
})

app2 远程应用： vite.config.js配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'app2',
      filename: 'remoteEntry.js',
      library: { type: 'module' },
      exposes: {
        './App': './src/App.jsx',
      },
      shared: ['react'],
    }),
  ],
})

我们看到这些配置同 webpack 如出一辙，稍微不同的是

remotes 对象中不需要写, app2@这个全局变量名称，并且 vite 打包的 remoteEntry.js 默认在 assets 文件夹下

remotes: {
    app2: "http://localhost:3002/assets/remoteEntry.js",
},

vite-plugin-federation 还可以和 webpack 配合使用

remotes: {
    app2: {
        external: 'http://localhost:5011/remoteEntry.js',
        format: 'var',
        from: 'webpack'
    }
}

官方还提供了 systemjs\ esm 和 var 等不同的加载方式

host	remote	demo
`rollup/vite`+`esm`	`rollup/vite`+`esm`	simple-react-esm
`rollup/vite`+`systemjs`	`rollup/vite`+`systemjs`	vue3-demo-esm
`rollup/vite`+`systemjs`	`webpack`+`systemjs`	vue3-demo-systemjs
`rollup/vite`+`esm`	`webpack`+`var`	vue3-demo-webpack-esm-var
`rollup/vite`+`esm`	`webpack`+`esm`	vue3-demo-webpack-esm-esm

官方还提供了 2 点 warning：

React 项目中不能使用异构组件（例如 vite 使用 webpack 的组件或者反之），因为现在还无法保证 vite/rollup 和 webpack 在打包 commonjs 框架时转换出 export 一致的 chunk，这是使用 shared 的先决条件
vite 使用 webpack 组件相对容易，但是 webpack 使用 vite 组件时 vite-plugin-federation 组件最好是 esm 格式，因为其他格式暂时缺少测试用例完成测试

模块联邦的原理

Host 端消费 Remote 模块

整体逻辑

比如 Host 端有如下代码

import Section from './components/Section.vue'

const script = {
  name: 'App',
  components: {
    Section,
    Button: () => import('./components/Button.vue'),
    RemoteButton: () => import('remote-simple/remote-simple-button'),
  },
}

编译后悔转换为如下代码

import __federation__ from '__federation__'
import Section from './components/Section.vue'

const script = {
  name: 'App',
  components: {
    Section,
    Button: () => import('./components/Button.vue'),
    RemoteButton: () =>
      __federation__.ensure('remote-simple').then((remote) => remote.get('./remote-simple-button')),
  },
}

而 __federation__ 是一个虚拟文件，用于维护 remotesMap对象

const remotesMap = {
  'remote-simple': () => import('http://localhost:5011/remoteEntry.js'),
}

const shareScope = {
  vue: { get: () => import('__rf_shareScope__${vue}') },
}

const initMap = {}

export default {
  ensure: async (remoteId) => {
    const remote = await remotesMap[remoteId]()

    if (!initMap[remoteId]) {
      remote.init(shareScope)
      initMap[remoteId] = true
    }

    return remote
  },
}

Remote 端暴露模块

比如 Remote 暴露了 Button 模块

exposes: {
  './Button': './src/components/Button.js',
},

则会生成如下 remoteEntry.js

let moduleMap = {
  './Button': () => {
    return import('./button.js')
  },
}

const get = (module, getScope) => {
  return moduleMap[module]()
}
const init = (shareScope, initScope) => {
  let global = window || node
  global.__rf_var__shared = shareScope
}

export { get, init }

moduleMap 维护了所有导出的 remote 模块对象， init()做一些shareScope初始化的工作。get()会根据传入的模块名动态加载模块。

此时 remote 端 ./button.js 是不存在的，需要根据 exposes 配置信息将模块单独打包为 chunk，供 Host 端调用时加载。所以需要将 remote 端改成多入口的打包方式，Rollup 插件在 options()钩子，根据 exposes 改写 Rollup 的 input 配置，例如示例的 exposes 会生成：

input: {
  Button: './src/components/Button.js'
}

以上便是模块联邦的基本逻辑。

模块联邦存在问题

CSS 样式污染问题，建议避免在 component 中使用全局样式。
模块联邦并未提供沙箱能力，可能会导致 JS 变量污染
在 vite 中， React 项目还无法将 webpack 打包的模块公用模块

小结

鉴于 MF 的能力，我们可以完全实现一个去中心化的应用：每个应用是单独部署在各自的服务器，每个应用都可以引用其他应用，也能被其他应用所引用，即每个应用可以充当 Host 的角色，亦可以作为 Remote 出现，无中心应用的概念。

本文介绍了什么是模块联邦，在模块联邦之前，前端模块共享存在着各种痛点，并且通过在线例子演示了模块联邦的配置，也介绍了vite-plugin-federation 插件的使用及原理，它让我们可以在 Vite 项目中也可以实现模块共享。总体而言模块联邦配置相对简单，但模块联邦想要真正落地可能需要全员推动，因为在现实开发中，存在着跨部门协作，开发人员不可能了解每个项目的 vite.config.js 配置，这就需要我们将所有的 remote 模块维护成文档，供跨团队调用。

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

目录

前言