Turbopack란?

이번 next.js 를 하면서 글을 써야지 하고 마음먹은 것이 이녀석 때문입니다.

 

Turbopack이란? 갑자기 설치를 하면 좋을 것 같은 이름이었습니다.

하지만 아무것도 모르고 설치를 해야 하나? 괜히 ESline 에 걸려 에러만 나는 것은 아닌지 찾아봤습니다.

 

Turbopack는 JavaScript와 TypeScript에 최적화된 점진적 번들러로, Rust로 작성되었으며 Next.js에 내장되어 있다

라고 하는데요

 

점진적 번들러? Rust로 작성? Next에 내장? webpack의 후속작?

여러 알 수 없는 말을이 있을 겁니다. 이걸 다 설명하기는 너무 루즈하고 Vite와 비슷한데 성능이 우수하다고 생가하면 되는데요

그럼 Vite가 무엇인지 모를 수도 있고요 

 

다시 쉽게 정리하자면 빌드를 빠륵게 하기 위해 여러 모듈들을 한 곳에 모으는 작업입니다.

 

이전에는 Vite를 사용했지만 next에서는 베타로 turbopack을 제공을 하게 된 것입니다.

Turbopack의 주요 특징

1. 초고속 빌드 및 번들링
   • 기존 Webpack, Vite보다 훨씬 빠른 성능.
   • Rust로 구현되어 CPU 및 메모리 효율이 높음.
2. 최적화된 개발 환경
   • 실시간으로 변경 사항을 빠르게 반영하는 Hot Module Replacement (HMR) 지원.
   • 대규모 프로젝트에서도 빌드 속도가 매우 빠름.
3. Incremental Compilation (증분 컴파일)
   • 변경된 파일만 다시 빌드하여 불필요한 작업을 최소화.
   • 대규모 코드베이스에서도 효율적으로 작동.
4. 완벽한 Next.js 통합
   • Next.js에 최적화된 설정을 제공.
   • pages/와 app/ 디렉토리 모두 지원.
5. 미래 지향적 번들러
   • Turbopack은 Next.js 외에도 다양한 JavaScript 프레임워크에서 사용될 가능성이 높음.
   • Vercel은 이를 Webpack처럼 널리 사용되는 번들러로 발전시키는 것을 목표로 함.

 

Turbopack vs Webpack vs Vite

특징TurbopackWebpackVite

특징	Turbopack	Webpack	Vite
기술 기반	Rust	JavaScript	JavaScript
속도	매우 빠름	느림	빠름
사용성	Next.js에 최적화	범용	범용
Hot Reloading	빠르고 효율적	느림	빠르고 효율적
빌드 최적화	Incremental Compilation	Full Bundling	Pre-bundling
확장성	초기 단계	매우 널리 사용됨	상대적으로 적은 도입률

 

이런 내용이 있더라고요 하 빠르구나 그럼 사용해야지 하고 사용하기로 했습니다.

 

 "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "build-start": "next build && next start",
    "lint": "next lint",
    "watch": "nodemon"
  },

이렇게 사용하기로 했습니다.