Next.js 공식 홈페이지에서 추천하는 빌드 속도 올리기(+SWC, 터보팩)

프로젝트에 사용하던 버전의 Next.js 속도를 개선하려고 빌드 툴을 찾아보는데,

시중에 나와있는 여러 빌드 툴들(Vite, Snowpack)은 안정성이라던가 업데이트 안함 등으로 아직은 사용하기가 꺼려졌었다

 

그런데 12.3으로 버전 업을 하면서 넥스트 공식 홈페이지에서 SWC 라는 빌드 툴을 안정화까지 했다고 🎉🎉🎉

 

옳게된 라이브러리이다

 

SWC란?

SWC는 자바스크립트 프로젝트의 컴파일과 번들링 모두에 사용될 수 있는, Rust라는 언어로 제작된 빌드 툴입니다. SWC는 Speedy Web Compiler의 약자로, 말 그대로 매우 빠른 웹 컴파일러의 기능을 제공하는 툴입니다.

카카오 기술블로그에서 자세한 내용을 확인할 수 있다.(https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/)

 

Rust 를 이용하여 기존에 사용하던 빌드 툴을 다시 구현하는 SWC는 병렬처리를 이용하기 때문에 기존보다 7배 빠른 속도로 빌드할 수 있게 해준다.

 

SWC 적용하기

1. Next.js 를 12.3 이상으로 업그레이드한다(필자는 12.3.1 버전 사용)

2. 공홈에서 설명해주는대로 세팅한다(https://nextjs.org/blog/next-12-3#swc-minifier-stable)

// next.config.js
module.exports = {
  swcMinify: true,
};

 

SWC 적용 후 체감

일단 로컬 빌드 속도가 기존 120~130초에서 100초 이내로 줄어든 것을 확인했고,

젠킨스 빌드 속도가 3분 30초에서 30초 줄어든 것으로 확인했다

 

새로운 빌드툴 터보팩?

Next.js 13버전부터 터보팩이 소개되었다.

 

물론 알파버전이어서 아직 적용은 안했지만, Vite 와의 협력 소식과 Vite, SWC 와 함께 쓸 수 있도록 작업중이라는 소식은 벌써부터 많은 기대를 하게 만든다. 넥스트 최고다 👍

 

https://nextjs.org/blog/next-13#introducing-turbopack-alpha

Next.js 13