Frontend 빌드 도구 비교 — Vite 7 vs Turbopack vs Rspack

핵심 요약

Webpack의 시대가 사실상 마무리. 새 표준 후보 3개 — Vite, Turbopack, Rspack — 이 자리를 두고 경쟁 중. 2026년 4월 기준 Vite가 70% 점유, Rspack 성장세 빠름, Turbopack은 Next.js 한정.

• Vite 7 (2026-01): Rolldown (Rust) 기본, esbuild 보조
• Turbopack: Next.js 16의 default builder
• Rspack 1.0 (2025-08): Webpack API 호환, Rust 기반

1. 빌드 속도 (실측)

Rspack이 최근 가장 빠름. Vite 7도 Rolldown 도입으로 대폭 향상.

2. Vite 7

아키텍처

• Dev: esbuild로 의존성 prebundle, ES module로 dev 서버
• Build: Rolldown (Rust, esbuild·Rollup 융합)
• 플러그인: Rollup 호환

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'es2022',
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] }
      }
    }
  },
  server: { port: 5173 }
})

3. Turbopack

Vercel·Next.js 팀이 만든 Rust 기반 builder. 점진적 컴파일 + incremental bundling.

# Next.js에서 자동 사용
next dev --turbo
next build --turbo  # 16부터 default

Next.js 외에는 사용 안 됨. 직접 사용은 권장 안 함.

4. Rspack

ByteDance가 만든 Rust webpack. Webpack config 거의 그대로 사용 가능.

// rspack.config.js — webpack과 거의 동일
module.exports = {
  entry: './src/index.tsx',
  output: { path: __dirname + '/dist' },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'builtin:swc-loader' },
    ],
  },
  plugins: [...],
}

Webpack 마이그레이션

npm uninstall webpack webpack-cli
npm install -D @rspack/core @rspack/cli
# 90% config 그대로 동작

5. 비교 매트릭스

6. 사용 시나리오

Vite 권장

• 새 SPA 프로젝트 (React·Vue·Svelte)
• SvelteKit·Nuxt·Remix 등 메타프레임워크
• 플러그인 생태계 활용 (Vitest 통합 등)

Turbopack 권장

• Next.js 사용 (강제)

Rspack 권장

• Webpack 운영 중 → 빠른 마이그레이션
• 거대한 모놀리스 (5만+ 파일)
• Webpack 플러그인 다수 사용

7. esbuild·SWC·Rolldown 관계

8. 실전 — Vite 7 + React 19 + TypeScript

# 시작
pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm install
pnpm run dev  # 0.3초 안에 dev 서버
pnpm run build  # 4초 안에 빌드

9. 실전 — Webpack에서 Rspack 마이그레이션

# 1) 의존성 교체
npm install -D @rspack/core @rspack/cli

# 2) package.json scripts
{
  "scripts": {
    "dev": "rspack dev",
    "build": "rspack build"
  }
}

# 3) webpack.config.js → rspack.config.js (대부분 그대로)
# 4) loader 일부 교체 (babel-loader → builtin:swc-loader)

중간 크기 프로젝트 마이그레이션 평균 1~2일.

10. 도구·플러그인

11. 빌드 결과 비교

최종 번들 품질은 거의 동일. 차이는 빌드 속도.

자주 묻는 질문

Webpack 운영 중인데 굳이 옮겨야?큰 프로젝트라면 Rspack 권장 (호환성 + 속도). 작은 프로젝트는 Vite로 새로 시작이 더 단순.

Vite와 Next.js 둘 다 사용?가능. 보통 마케팅·블로그는 Vite + Astro, 대시보드는 Next.js + Turbopack.

Bun 빌드는 어디?Bun.build()도 빠름. 단 플러그인 생태계가 위 3개보다 적음. Bun 전용 프로젝트만 권장.