让我看看哪块小饼干还不知道Vite-plugin-federation

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

这通常被称作微前端，但并不仅限于此。

这是 webpack¹ 官方对 module-federation 的说明，这同样是 vite-plugin-federation² 的说明

为什么创建 vite-plugin-federation

webpack5 的 module-federation 让我们看到了一些令人激动的功能，但是有个限制，你必须使用 webpack5 才能使用 module-federation 功能，但是你知道的，vite 正在迅速发展，我们希望能在 vite 上使用 module-federation，这就是创建 vite-plugin-federation 的原因。

示例

该示例位于以下位置，可以自由前往获取

• gitee：https://gitee.com/originjs/vi...
• github: https://github.com/originjs/v...

在项目packages/example/下是插件的使用demo，均可以使用 pnpm build & pnpm serve 来启动查看效果。

快速开始

在使用之前，我建议首先了解下以下几个概念，这些概念和 webpack 中是相同的

• remote：服务提供方
• host：服务消费方
• shared：可以共享的依赖库，这可以使 host 和 remote 使用相同的底层依赖而不是同时引入多个底层依赖

例如一个简单的项目（省略配置文件）

demo
├── host
│   ├── index.html
│   └── src
│       └── index.js
└── remote
    └── src
        ├── button.vue
        └── index.js

1. 安装 vite-plugin-federation

• pnpm

pnpm install @originjs/vite-plugin-federation -D

• yarn

yarn add @originjs/vite-plugin-federation --dev

• npm

 npm install @originjs/vite-plugin-federation -D

2. remote 方暴露组件

在 remote/vite.config.js 中配置如下内容

export default defineConfig ({
  ...
  plugins: [
    federation ({
      //name of your app
      name: 'demo-remote',
      // 可以自定义，不过 remoteEntry 是约定俗成的名称
      filename: 'remoteEntry.js',
      // 配置对外暴露的组件
      exposes: {
        './button': './src/components/button.vue'
      },
      //share vue
      shared: ['vue']
    })
  ],
  ...
})

2. host 方定义 remote

在 host/vite.config.js 中配置如下内容

export default defineConfig ({
  ...
  plugins: [
    federation ({
      //name of remote app
      name: 'demo-host',
      remotes: {
        //the address of remoteEntry
        demo-remote: 'http://localhost:5001/assets/remoteEntry.js'
      },
      //share vue
      shared: ['vue']
    })
  ]
  ...
})

3. host 方使用远程组件

const app = createApp ();
// 定义组件，注意这是 vue 的写法，不同的框架定义远程组件的方式不同
const remoteButton = defineAsyncComponent (() => import ("demo-remote/button"));
app.component ("button", remoteButton);

// 最后就像使用本地组件一样使用定义的组件就可以了

然后 build & serve 查看结果。

与 webpack 集成

考虑到一些项目使用了 webpack 和 module-federation，并且逐步向 vite 迁移，所以 vite-plugin-federation 可以在某些情况下消费 webpack module-federation 的组件，但是存在使用限制，限制如下。

当前的限制

• dev 模式当前仅支持 host ，不支持 remote。
• 与 webpack 集成只支持在 remote 侧使用 webpack module federtion，并且有打包格式的限制，具体如下

host	remote
rollup/vite+esm	webpack+var
rollup/vite+systemjs	webpack+systemjs

后续计划

• 提供 host:webpack + remote: vite-plugin-federation 的支持。
• webpack 的 esm 打包格式稳定后（当前是实验性特性），提供对webpack esm 打包格式的支持。
• remote dev 模式的支持。

选择 vite-plugin-federation 还是 module-federation

我认为你不应该陷入这个选择中，你应该选择的是 vite 或者 webpack。

仓库地址

gitee : https://gitee.com/originjs/vi...

github : https://github.com/originjs/v...

Vueshenzhen Meetup

最后再来宣传一波，12月30日--Vue Shenzhen Meetup如故，不负相约！本期我们邀请到了Vue.js Team Member，Vue3活跃贡献者戴威(@edison1105)

本期议题：Vue3 Virtual DOM性能优化

Vue3为了优化运行时性能，对Virtual DOM 进行了重构，本次分享将带你了解：

亮点1：传统diff 算法的性能瓶颈

亮点2：Vue3 Virtual DOM 的重构思路

亮点3：diff 算法的改进

期不期待，惊不惊喜~！心动不如行动，快来报名吧，一起等待12月30日的到来~

报名链接：LINK

---

1. https://webpack.js.org/plugin... ↩
2. https://github.com/originjs/v... ↩