Next JS가 Babel을 SWC로 대체한 이유

이 게시글은 why-you-shoud-replace-babel-with-swc-in-next-js를 읽고 정리한 내용입니다.

12 버전이 나오기 전, Next JS는 transpile을 위해 babel을 사용했다. 하지만 babel은 컴파일을 느리게 만드는 주범이었고 12 버전은 이를 개선하기 위해 SWC 컴파일러를 도입했다.

*transpile이란 최신의 자바스크립트 문법을 어떤 브라우저든 이해할 수 있도록 ES5 자바스크립트로 변환해주는 것이다.

babel의 한계점

1. 배포 뒤, 개발자들이 babel이 변경한 코드를 이해하기 어려워 할 수있다.
2. 코드의 크기가 늘어난다.
3. polyfill을 사용해서 babel이 지원해주지 않는 범위까지 변환해주어야 한다.
4. 다른 컴파일러보다 시간이 오래 걸린다.

SWC 컴파일러

SWC(Speedy Web Compiler)는 Rust로 작성된 컴파일러이다. 저급 프로그래밍 언어인 Rust로 작성되었기 때문에 컴파일시 매우 빠르게 동작한다. 개발자들은 웹사이트 최적화, 번들링, 컴파일 등 다양한 기능을 위해 SWC를 사용할 수 있다.

SWC의 장점
1. 확장성: 개발자들은 라이브러리를 fork 해올 필요 없이 Next JS에 미리 설치된 SWC를 사용할 수 있다.
2. WebAssembly: Rust의 WASM(WebAssembly) 지원으로 어떤 종류의 플랫폼에서도 Next JS 개발을 할 수 있다.
3. 성능: 다른 컴파일러들보다 훨씬 좋은 성능을 제공한다.
4. 커뮤니티 지원: 빠르게 성장하는 커뮤니티를 가지고 있다.

SWC 적용하기

SWC를 적용하는 여러 방법들을 알아보도록 하겠다. 위에서 말했듯이 SWC가 Next JS에 내장되어 있으므로 따로 설치할 필요는 없다.

새로운 프로젝트에 적용

아래 명령어로 Next JS 12 버전의 프로젝트를 생성해주면 된다.

npx create-next-app@latest
#OR
yarn create next-app

만약 타입스크립트를 사용한다면 아래처럼 적용해준다.

npx create-next-app@latest --typescript
#OR
yarn create next-app --typescript

기존 프로젝트에 적용
Next JS 12 혹은 이상의 버전이 아닌 이전 버전을 사용중이라면 아래와 같이 업그레이드 해줘야 한다.

npm install next@12

그리고 babel configuration을 해두었다면 Next JS가 babel을 인식하므로 파일을 지워줘야 한다. .babelrc 또는 babel.config.js 파일을 지워준다.

추가 세팅하기

next.config.js 파일을 이용해서 최적화 같은 옵션들을 적용해줄 수 있다.

최적화 옵션 적용하기

module.exports = {
  swcMinify: true,
}

console call 제거하기

module.exports = {
  compiler: {
    removeConsole: true,},
}

하지만 몇몇 콘솔 기능을 제외하고 싶다면 아래처럼 적용해준다. 아래 예시는 console.log 를 제외한 모든 console을 지워준다.

module.exports = {
  compiler: {
    removeConsole: {
      exclude: ['log'],
    },
  },
}