안녕하세요 오늘의 5분개발지식라디오~ 오늘의 주제는 Turbopack입니다. Turbopack은 NextJS를 개발한 Vercel에서 만든 차세대 번들링툴인데요, 간단하게 알아보도록 하겠습니다.
Vercel은 빌드시간을 줄이기 위해서 다양한 작업을 진행하고 있는데요, 자바스크립트로 작성된 툴들을 Rust기반 툴들로 변경할 때마다 엄청난 성능 향상이 있었다고 합니다.
트랜스파일링 툴인 Babel을 대체했을때는 transpilation이 17배빨라졌고, 코드 사이즈를 줄이는 minification툴인 Terser를 대체했을때는 6배빨라졌다고 합니다.
그리고 마지막으로 Vercel에게 남은 숙제가 JS로 만들어진 가장 유명하고 널리쓰이는 번들링툴인 Webpack이었고 이를 대체하기 위한 툴이 오늘 소개하고자 하는 Turbopack입니다. 아 그리고 혹시 Rust가 어떤 언어인지 궁금하신 분들은 다음영상으로 소개하고자하니 구독하고 놓치지 마세요
Vercel이 공개한 자료에 따르면 규모가 있는 어플리케이션에서 Vite보다는 10배빠르고 Webpack보다는 700배 빠르다고 합니다. 그럼 Turbopack은 어떻게 이렇게 빠를 수 있을까요?
Turbopack의 구조는 Turborepo와 구글의 Bazel과 같은 툴에서 많은 영감을 받았다고 하는데요, 같은 일을 2번하지 않고 캐시를 사용하는것이 가장 핵심아이디어라고 합니다.
Turborepo는 이를 위해 Turbo라는 프레임워크를 사용하였는데요, Turbo는 Rust기반의 프레임워크로서 프로그램의 어떤 함수의 결과라도 캐싱할 수 있다고합니다. 따라서 프로그램이 재실행됐을 때 이전에 실행되었던 함수의 입력값이 변경되지않았다면 재계산을 하지 않기때문에 압도적으로 빠를 수 있는 것이죠. 이게 사이즈가 큰 어플리케이션에 적용되면 대부분의 작업을 스킵할 수 있다고 합니다.
지금 화면에 보이는 플로우차트를 보시면 좀 더 감이 오실 것 같은데요, api.ts와 sdk.ts라는 파일을 읽어서 bundle을 하고 concat으로 합쳐서 fullBundle을 만드는 일을 한다고 가정해보겠습니다. sdk.ts의 파일내용만 변경되었다면 api.ts는 readFile과 bundle을 모두 스킵하고 이전 결과물을 그대로 사용하고, sdk.ts만 새로 읽고 번들링을 적용합니다.
위의 경우 전체 6개의 작업 중 2개를 스킵했으니 단순 수치로도 33%감소인데요, 실제 작업상으로는 파일 입출력이 상대적으로 더 많은 시간을 잡아먹을테니 실질적으로는 더 큰 시간감소가 있을 것으로 예상됩니다.
캐싱은 현재로써는 인메모리캐시에 저장된다고 합니다. 즉 프로세스가 살아있는 동안에만 저장될 것 같습니다만 나중에는 이 캐시를 영구적으로 저장할 수 있도록 파일시스템이나 리모트 서버로 보내도록 할 예정이라고 합니다.
Next13부터는 개발용 서버에 Turbopack이 사용된다고 합니다. 페이지의 일부분을 리렌더링하는 Hot module replacement을 하는 경우에 매우 빠른 구동이 가능할 것으로 보입니다.
현재로써는 인메모리캐시이기 때문에 개발용 서버에만 사용되지만 나중에 캐시가 영구저장이 가능해지면 프로덕션에까지 확장시키고, 미리 만들어져있는 캐시들을 공유할 수 있도록 한다고하니 훨씬 빠른 빌드와 배포가 가능해질 것 같습니다.
개발자_무형