Turbopack | Vercel Rust 기반 번들러 | KAITRUST AI 백과사전

📖 상세 설명

Turbopack은 Vercel이 Rust로 개발한 차세대 JavaScript/TypeScript 번들러입니다. Webpack의 정신적 후속작으로, 대규모 프로젝트에서도 밀리초 단위의 증분 컴파일을 목표로 설계되었습니다. Next.js 15 이상에서 기본 번들러로 채택되었습니다.

Turbopack이 빠른 이유는 Rust의 저수준 성능과 증분 연산 엔진 때문입니다. 파일이 변경되면 영향받는 부분만 다시 계산하는 함수 수준 캐싱을 사용하여, 프로젝트 크기와 관계없이 일정한 업데이트 속도를 유지합니다.

Turbopack은 Webpack의 아키텍처적 한계(JavaScript 기반, 전체 번들 재계산)를 해결합니다. Vercel 벤치마크에 따르면 Vite보다 10배, Webpack보다 700배 빠른 콜드 스타트를 보여줍니다. 다만 이 수치는 대규모 프로젝트 기준이며, 소규모에서는 차이가 적습니다.

실무에서 Turbopack은 Next.js 개발 서버에서 자동 활성화됩니다. 아직 프로덕션 빌드는 Webpack을 사용하지만, Vercel은 점진적으로 Turbopack 지원을 확대하고 있습니다. HMR(Hot Module Replacement)이 거의 즉각적이어서 대규모 모노레포에서 특히 생산성이 향상됩니다.

💻 코드 예제

# Next.js에서 Turbopack 활성화

# 개발 서버 (Next.js 13+)
next dev --turbo

# package.json scripts 설정
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

# next.config.js - Turbopack 설정 (experimental)
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        // 커스텀 로더 설정
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
      resolveAlias: {
        // 모듈 별칭 설정
        underscore: 'lodash',
      },
    },
  },
}

module.exports = nextConfig

🗣️ 실무에서 이렇게 말하세요

💬 팀 미팅에서

"Next.js 15로 업그레이드하면서 Turbopack을 활성화했더니 HMR이 체감될 정도로 빨라졌어요. 이전에는 저장하고 2-3초 기다렸는데, 이제는 거의 즉시 반영됩니다. 대신 아직 일부 Webpack 플러그인과 호환이 안 되니까 확인 필요해요."

💬 면접에서

"Turbopack은 Rust로 작성된 번들러로, 증분 연산을 통해 변경된 부분만 재컴파일합니다. Webpack처럼 모듈 그래프 전체를 다시 계산하지 않아서 프로젝트 규모가 커져도 빌드 시간이 선형적으로 증가하지 않는 것이 핵심입니다."

💬 기술 토론에서

"Turbopack vs Vite 논쟁이 있는데, 둘 다 장단점이 있어요. Vite는 esbuild + Rollup 기반으로 생태계가 성숙하고, Turbopack은 Next.js에 최적화되어 있죠. 저희처럼 Next.js 쓰는 팀은 Turbopack이 맞고, 다른 프레임워크면 Vite가 나을 수 있어요."

⚠️ 흔한 실수 & 주의사항

❌

모든 Webpack 플러그인이 동작할 거라 기대

Turbopack은 Webpack과 API가 다릅니다. 복잡한 Webpack 플러그인은 아직 지원되지 않을 수 있어서, 마이그레이션 전 호환성 확인이 필요합니다.

❌

프로덕션 빌드에 Turbopack 사용 시도

2024년 현재 Turbopack은 개발 서버(next dev --turbo)에서만 사용됩니다. 프로덕션 빌드(next build)는 여전히 Webpack을 사용합니다.

✅

올바른 접근법

개발 환경에서 먼저 Turbopack을 테스트하고, 문제가 있으면 --turbo 플래그를 제거하여 Webpack으로 폴백할 수 있습니다. 점진적으로 도입하세요.

🔗 관련 용어

📚 더 배우기

📄 Turbopack 공식 문서 🎓 Next.js Turbopack 가이드 📖 Vercel Turbopack 발표 블로그