SWC

노션 블로그를 작업하던 중 빌드를 하면서 문득 콘솔에 보이는 메시지에 대해 눈이 가서 검색을 해봤다.

번역을 해보니 .babelrc 파일로 인해 swc 를 사용하지 않고 babel 을 통해 트랜트파일링을 한다는 의미였다.

여기서 swc 가 어떤 것인지에 대해 궁금증이 생겼고 기본적인 개념과 실제로 블로그 프로젝트에 적용한 결과를 정리해보려고 한다.

특징

💡

해당 과정은 babel 을 사용하는 next.js 프로젝트를 기준으로 작성되었습니다.

styled components 처럼 next.config.js 에 적용할 수 있는 플러그인은 해당 링크에서 확인할 수 있다.

이런 식으로 swc 를 적용하고 빌드를 하면 babel 이 아닌 swc 가 적용되었기 때문에 맨 처음에 콘솔에 보였던 메시지가 제거된 것을 확인할 수 있다.

실제로 운영 중인 블로그 프로젝트에서 babel 과 swc 의 빌드 시간을 측정해봤다.

큰 프로젝트가 아니다 보니 엄청난 차이는 느끼지 못했지만, 평균적으로 5초 이상 단축된 것을 확인할 수 있었다.

지금까지 트랜스파일러라고 하면 babel 만 생각해서 프로젝트에 적용했었는데 개발 중인 프로젝트에 swc 와 호환이 가능하다면 도입해보는 것도 좋은 방법이라고 생각한다. 그래서 나는 운영 중인 블로그에 swc 를 적용하였고 빨라진 빌드 속도에 만족하고 있다.

참고