vite-plugin-federation的简介和使用

1.背景

在当今前端开发领域，随着项目规模不断扩大、业务日益复杂，传统的模块管理与代码拆分方式面临诸多挑战。不同团队、项目开发的模块难以高效复用和集成，项目整体的架构灵活性与可维护性降低。 模块联邦技术应运而生，它打破了传统模块体系的边界，实现了跨应用、跨团队的模块共享与协同。

vite-plugin-federation作为模块联邦技术在Vite构建工具中的实现，具有重要意义。它借助Vite快速的构建速度和良好的开发体验，让开发者能更便捷地运用模块联邦理念。

2.模块联邦技术概述

模块联邦是Webpack5引入的核心特性，主要是用于实现跨应用动态共享代码，可以允许不同的Web应用（或微前端应用）在运行时动态共享代码，无需传统的物理共享方式。每个应用可独立开发、构建和部署，同时共享组件、库或业务逻辑。它通过全局变量组合实现模块间的数据获取，是一种轻量级的共享方案。

3.vite-plugin-federation

3.1简介

vite-plugin-federation是基于Vite实现模块联邦的插件，其核心原理是通过动态加载远程模块的代码和资源，实现跨应用（或跨构建工具）的代码共享和依赖复用。远程模块的各组件可以进行独立开发和部署，开发者可以直接引用组件。

• 核心功能：
  • 共享依赖：避免重复打包公共库。
  • 动态加载：运行时按需加载远程组件或路由。
  • 独立部署：子应用可独立开发、构建和发布。

3.1基础使用

vite-plugin-federation的使用分为远程端(remote)和主机端(host)，remote需要暴露模块供其他应用使用，host是动态加载远程模块。

1. 安装vite-plugin-federation插件

npm install @originjs/vite-plugin-federation

2. 远程端(remote) remote是远程服务端，需要在在vite.config.js中暴露模块(组件、方法等)和配置。

import federation from '@originjs/vite-plugin-federation';
export default defineConfig({
  plugins: [],
      federation({
      name: 'home', //自定义项目名称,调用时需要
      filename: 'remoteEntry.js', // 自定义构建文件名称,调用时需要
      exposes: {
        // 暴露模块
        './login': './src/page/login/login.vue',
      },
      shared: ['vue'], //依赖
    }),
});

在通过npm run build命令打包项目，dist中生成了remoteEntry.js入口文件。

3. 主机端(host) host端在vite.config.js中配置引用remote端

import federation from '@originjs/vite-plugin-federation';
export default defineConfig({
  plugins: [
      federation({
      remotes: {
        home: 'http://localhost:5173/dist/assets/remoteEntry.js', ##为远程端本地运行的打包入口
      },
      shared: ['vue'],
    }),
  ],
});

直接在项目中引用远程模块

<template>
  <login></login>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const login = defineAsyncComponent(() => import('home/loginPage'));
</script>