[이제와서 시작하는 Next.js 마스터하기 #13] Turbopack으로 개발 속도 10배 향상

“빌드가 이렇게 빠를 수 있다니!” - Turbopack으로 개발 생산성 폭발!

🎯 이 글에서 배울 내용

• Turbopack이 무엇인지
• Webpack vs Turbopack 비교
• Turbopack 활성화 방법
• 성능 최적화 팁

예상 소요 시간: 25분 난이도: 초급

---

⚡ Turbopack이란?

Rust로 작성된 초고속 번들러

속도 비교

Webpack:  ████████████████████ 60초
Turbopack: ██ 12초 (5배 빠름!)

Fast Refresh:
Webpack:  ███ 3초
Turbopack: < 1초 (10배 빠름!)

---

🚀 Turbopack 활성화

1. 개발 모드

# Turbopack 사용
npm run dev --turbo

# 또는 package.json에 추가
{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

2. 프로덕션 빌드 (Next.js 16)

npm run build --turbo

---

🔧 설정

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
};

---

📊 성능 측정

# 빌드 시간 측정
time npm run build

# 개발 서버 시작 시간
time npm run dev

---

🎯 오늘 배운 내용 정리

1. Turbopack
   • 5-10배 빠른 빌드
   • Rust 기반
   • Next.js 16에서 안정화
2. 활성화
   • –turbo 플래그
   • package.json 수정

---

📚 시리즈 네비게이션

• #12 테스팅으로 안정성 확보하기
• #14 React Compiler와 성능 최적화 (다음 편)

---

“Turbopack = 생산성 혁명!” ⚡