초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
프론트엔드
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
두줄요약
Babel과 Terser의 트랜스파일링·코드 경량화 역할을 초보자 관점에서 설명했습니다. Next.js의 SWC가 반복 빌드 시간을 줄일 수 있는 배경을 소개했습니다.
구조와 흐름
- Babel의 최신 JavaScript 문법을 구버전 브라우저 호환 코드로 변환하는 트랜스파일링 역할
- Terser의 mangling·compressing 기반 코드 경량화와 프로덕션 소스 크기 축소
- Rust로 제작되어 컴파일과 번들링에 활용 가능한 SWC 소개
선택 이유
- 모노레포 환경에서 반복 빌드에 5~10분이 걸리는 개발 피드백 지연
- Next.js 12부터 도입된 SWC와 기존 빌드 도구 대비 최대 5배 빠른 빌드 시간 소개
성능/운영 포인트
- 의미 있는 변수·함수명을 짧은 문자로 바꾸는 mangling으로 파일 크기 축소
- 코드 구조를 동등한 더 짧은 형태로 변환하는 compression과 공백 제거
- 소스 파일 다운로드 시간 단축을 통한 웹 기능 제공 지연 완화
적용해볼 점
- Babel REPL에서 IE10 대상 문법 변환 결과 확인
- Terser CLI의
--mangle,--compress옵션으로 코드 경량화 결과 비교