Next.js의 새로운 번들러, 터보팩(Turbopack)으로 빌드 속도 혁신!
Next.js의 새로운 번들러인 터보팩(Turbopack)은 캐싱과 점진적 계산을 통해 빌드 속도를 향상시킴
자동 의존성 추적(Automatic Dependency Tracking)을 위해 'Value Cells' 개념을 도입하여 세분화된 캐싱 아키텍처를 구현
변경 사항 발생 시, 관련 함수를 'Dirty' 상태로 표시하고 재계산하는 점진적 업데이트(Incremental Update) 방식을 사용
Aggregation Graph를 활용하여 대규모 의존성 그래프(Dependency Graph)에서 효율적인 정보 쿼리(Query)를 지원
Next.js 16.1 릴리스를 통해 파일 시스템 캐싱(File System Caching)을 도입하여 개발 환경의 성능을 더욱 개선
터보팩(Turbopack)의 핵심: Value Cells
터보팩(Turbopack)은 자동 캐싱(Automatic Caching)과 의존성 추적(Dependency Tracking)을 위해 'Value Cells(Vc)'라는 개념을 도입했다. 각 Value Cell은 스프레드시트의 셀과 유사하게, 실행의 세분화된 부분을 나타낸다. 셀을 읽을 때, 현재 실행 중인 함수와 해당 셀에 의존하는 모든 셀을 기록한다.
세분화된 캐싱(Fine-grained Caching): 전통적인 Top-down 방식의 메모이제이션(Memoization)보다 더 세분화된 캐싱을 제공
객체 및 매핑(Object & Mapping) 변경 대응: 객체나 매핑의 일부가 변경되어도, 실제로 읽은 셀만 재계산
AST, 메타데이터(Metadata) 등 저장: 파일 시스템의 파일, AST(Abstract Syntax Tree), 모듈의 import/export 메타데이터, 청크(Chunk) 정보 등을 Value Cell로 표현
이러한 Value Cells는 터보팩(Turbopack)의 점진적 빌드(Incremental Build)를 가능하게 하는 핵심 요소이다.
점진적 업데이트(Incremental Update) 메커니즘
터보팩(Turbopack)은 파일 시스템 감시자를 통해 소스 코드 변경을 감지하고, 변경된 파일을 읽는 모든 함수를 'Dirty' 상태로 표시하여 재계산을 시작한다.
Dirty 상태 전파(Dirty Propagation): 변경된 파일에 의존하는 함수를 재계산하고, 그 결과로 변경된 셀은 다시 다른 함수를 'Dirty' 상태로 만듦
Demand-driven 실행: 'Active Query'의 일부가 될 때까지 Dirty 상태의 함수 실행을 지연하여 불필요한 계산 방지
최적화(Optimization): 셀 내용이 동일하면 업데이트를 건너뛰어 계산량 최소화
이러한 점진적 업데이트(Incremental Update) 방식은 빌드 속도(Build Speed)를 획기적으로 개선하며, 개발 생산성을 향상시킨다.
Aggregation Graph를 활용한 효율적인 쿼리
터보팩(Turbopack)은 의존성 그래프(Dependency Graph) 외에 'Aggregation Graph'라는 추가적인 데이터 구조를 사용한다. 이는 대규모 의존성 그래프(Dependency Graph)에서 효율적인 정보 쿼리를 가능하게 한다.
다중 레이어(Multi-layer) 구조: 여러 레이어의 Aggregation Node를 통해 의존성 그래프의 정보를 요약
Active Query 지원: 애플리케이션의 엔트리 포인트(Entrypoint) 또는 라우트(Route)와 같은 잠재적인 Active Query를 Aggregation Graph의 Root로 사용
오류 및 경고 수집: Aggregation Node에 오류, 경고, 린트(Lint) 정보 등을 첨부하여 정보 접근성 향상
이러한 Aggregation Graph는 대규모 프로젝트(Large-scale Project)에서 빌드 및 분석 성능을 유지하는 데 중요한 역할을 한다.
파일 시스템 캐싱(File System Caching)의 도입
Next.js 16.1 릴리스를 통해 터보팩(Turbopack)은 파일 시스템 캐싱(File System Caching)을 도입하여 개발 환경의 성능을 더욱 향상시켰다.
지속성(Persistence): 의존성 그래프(Dependency Graph), Aggregation Graph, Value Cells에 저장된 중간 결과 등을 디스크에 저장
빠른 재시작(Fast Restart): next dev 재시작 시, Warm Cache로부터 빠르게 시작하여 개발 생산성 향상
고품질(High Quality) 구현: 파일 시스템 캐싱(File System Caching) 구현에는 1년 이상이 소요될 정도로 많은 노력이 투입
파일 시스템 캐싱(File System Caching)은 대규모 프로젝트(Large-scale Project)에서 개발 환경의 전반적인 성능(Overall Performance)을 크게 개선하는 핵심 기능이다.
터보팩(Turbopack) vs 기존 번들러(Bundler) 비교
터보팩(Turbopack)은 기존 번들러와 달리 점진적 계산(Incremental Computation) 방식을 채택하여 빌드 속도를 혁신적으로 개선했다.
Webpack의 한계: 기존 번들러는 파일 단위의 캐싱(File-level Caching)을 주로 사용하며, 세분화된 변경 사항을 반영하는 데 한계
Salsa, Rust Compiler 영감: 터보팩(Turbopack)은 Salsa, Rust Compiler의 쿼리 시스템 등에서 영감을 받아 자동 의존성 추적(Automatic Dependency Tracking) 기술을 개발
세분화된 캐싱(Fine-grained Caching): Value Cells를 활용하여 함수 단위의 캐싱을 구현, 변경 사항에 대한 최소한의 재계산(Minimal Recomputation) 수행
Next.js 통합: Next.js의 기본 번들러로 채택되어, 대규모 웹 애플리케이션(Web Application) 개발 생산성 향상에 기여
터보팩(Turbopack)은 개발 생산성(Development Productivity)을 극대화하기 위한 혁신적인 접근 방식을 제시한다.
