Vite 모듈 페더레이션

Vite 생태계에서도 Module Federation을 사용하려는 노력이 계속되고 있으며, @originjs/vite-plugin-federation이 커뮤니티 주도로 Webpack MF와 호환을 목표로 개발되고 있다.

학습 목표

@originjs/vite-plugin-federation의 역할과 현재 상태를 이해한다
Vite에서 Module Federation을 설정하는 방법(vite.config.ts)을 익힌다
Webpack Module Federation과 Vite Plugin Federation의 차이점을 비교할 수 있다
Vite + Webpack 혼용 시 발생할 수 있는 문제와 한계를 파악한다
Native Federation 등 브라우저 범용 Module Federation 기술의 동향을 이해한다

1. Vite Plugin Federation 개요

@originjs/vite-plugin-federation은 Webpack의 Module Federation 개념을 Vite와 Rollup 환경에서 사용할 수 있게 해주는 커뮤니티 플러그인이다.

주요 특징:

항목	설명
패키지	`@originjs/vite-plugin-federation`
지원 환경	Vite, Rollup
호환 목표	Webpack Module Federation과의 호환
공식 여부	Vite 공식 플러그인이 아님 (커뮤니티 제공)
개발 모드	Host 측만 dev 모드 지원, Remote는 빌드 필수

Vite 창시자 Evan You는 2023년 ViteConf에서 Module Federation 기능의 부족함을 언급했다. Vite 측에서도 이 기능에 대한 공식 지원을 고민하고 있다.

2. Vite에서의 Module Federation 설정

2.1 Remote 앱 설정 (vite.config.ts)

// apps/remote-app/vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      // 앱 고유 이름
      name: "remoteApp",

      // 빌드 시 생성될 진입점 파일
      filename: "remoteEntry.js",

      // 외부에 노출할 모듈
      exposes: {
        "./Button": "./src/components/Button",
        "./Header": "./src/components/Header",
      },

      // 공유 의존성
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

2.2 Host 앱 설정 (vite.config.ts)

// apps/host-app/vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "hostApp",

      // 리모트 앱 등록
      remotes: {
        remoteApp:
          "http://localhost:3001/assets/remoteEntry.js",
      },

      // 공유 의존성 (객체 형태도 가능)
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
});

Vite 빌드 결과물은 dist/assets/ 경로에 생성되므로, remoteEntry.js 경로에 assets/가 포함된다는 점에 주의해야 한다.

2.3 Remote 앱 실행 시 주의사항

Vite 플러그인의 중요한 제약 사항은 Remote 앱을 dev 모드로 실행할 수 없다는 점이다. Remote 앱은 반드시 빌드 후 preview 모드로 실행해야 remoteEntry.js가 생성된다.

bash

# Remote 앱 - 반드시 빌드 후 preview로 실행
cd apps/remote-app
pnpm build
pnpm preview      # 빌드 결과물을 정적 서버로 제공

# Host 앱 - dev 모드 사용 가능
cd apps/host-app
pnpm dev

개발 편의를 위해 Remote 앱에서 vite build --watch를 사용하면 코드 변경 시 자동으로 재빌드된다.

3. Webpack MF와 Vite Plugin Federation 비교

비교 항목	Webpack MF	Vite Plugin Federation
내장 여부	Webpack 5 공식 내장	커뮤니티 플러그인 (비공식)
Dev 모드	Host/Remote 모두 지원	Host만 dev 모드, Remote는 빌드 필수
빌드 출력 경로	dist 루트	dist/assets/
shared 옵션	singleton, eager, requiredVersion, strictVersion 등 완전 지원	기본적인 옵션만 지원
프로덕션 안정성	충분히 검증됨	프로덕션 레벨 테스트 부족
모듈 형식	CommonJS, ESM 지원	ESM 위주
Hot Reload	양측 모두 지원	Remote 측 제한적

4. Webpack-Vite 혼용 시 고려사항

Vite Plugin Federation은 Webpack과의 호환을 목표로 하지만, 실제 혼용 시 여러 문제가 발생할 수 있다.

4.1 혼용 설정

Vite와 Webpack 프로젝트를 혼합할 때는 from과 format 옵션을 명시해야 한다.

// Vite Host에서 Webpack Remote를 사용하는 경우
federation({
  remotes: {
    webpackApp: {
      external: "http://localhost:3001/remoteEntry.js",
      from: "webpack",       // 소스가 Webpack임을 명시
      format: "var",         // Webpack의 기본 출력 형식
    },
  },
});

4.2 혼용 시 문제점

문제	원인
Chunk 불일치	Vite(Rollup)와 Webpack이 동일한 chunk를 생성하지 않음
Shared 충돌	다른 번들러가 생성한 모듈을 동일 라이브러리로 인식하지 못함
ESM/CJS 불일치	Vite는 ESM 위주, Webpack은 CJS도 지원하여 호환 문제

React 프로젝트에서 Vite와 Webpack을 혼합하는 것은 권장되지 않는다. 한 프로젝트 내의 모든 마이크로앱은 동일한 빌드 도구를 사용하는 것이 안전하다.

5. Native Federation과 미래 방향

Module Federation의 개념을 Webpack에 가두지 않고 브라우저 네이티브 수준으로 확장하려는 시도도 있다.

// @module-federation/vite 사용 예시
// Native Federation을 기반으로 한 Vite 플러그인
import { federation } from "@module-federation/vite";

export default defineConfig({
  plugins: [
    federation({
      name: "remoteApp",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/components/Button",
      },
      shared: {
        react: {},
        "react-dom": {},
      },
    }),
  ],
});

프로젝트	설명
@originjs/vite-plugin-federation	Vite/Rollup용 커뮤니티 플러그인, Webpack MF 호환 목표
@module-federation/vite	Native Federation 기반 Vite 플러그인
Native Federation	브라우저 범용 Module Federation 런타임 라이브러리

이러한 노력은 Module Federation이 Webpack만의 기술이 아닌, 프론트엔드 생태계 전반의 표준 아키텍처 패턴으로 자리잡고자 하는 방향성을 보여준다.

핵심 정리

항목	내용
Vite Plugin Federation	커뮤니티 플러그인으로 Webpack MF와 유사한 설정 구조 제공
설정 호환성	name, filename, exposes, shared 등 키워드가 Webpack MF와 동일
개발 모드 제약	Remote 앱은 빌드 필수, Host만 dev 모드 지원
혼용 비권장	Webpack-Vite 혼합은 chunk/shared 불일치로 문제 발생 가능
프로덕션 권장	안정성이 검증된 Webpack 5 MF 사용이 현 시점에서 안전
발전 방향	Native Federation 등 빌드 도구 독립적인 표준화 시도 진행 중

다음 단계

리모트 컴포넌트 로딩에서 React.lazy, Suspense, ErrorBoundary를 활용한 리모트 컴포넌트 로딩 및 에러 처리 패턴을 학습한다

Vite 모듈 페더레이션 ​

학습 목표 ​

1. Vite Plugin Federation 개요 ​

2. Vite에서의 Module Federation 설정 ​

2.1 Remote 앱 설정 (vite.config.ts) ​

2.2 Host 앱 설정 (vite.config.ts) ​

2.3 Remote 앱 실행 시 주의사항 ​

3. Webpack MF와 Vite Plugin Federation 비교 ​

4. Webpack-Vite 혼용 시 고려사항 ​

4.1 혼용 설정 ​

4.2 혼용 시 문제점 ​

5. Native Federation과 미래 방향 ​

핵심 정리 ​

다음 단계 ​