SWC(Speedy Web Compiler)

SWC(Speedy Web Compiler)란?

Rust라는 언어로 제작되었고 컴파일과 번들링을 수행하는 빌드 툴이다.

매우 빠른 JS 컴파일러로 기존 babel이 하던 일을 대체하였고,

SWC는 컴파일러이지만 웹팩과 같은 JS 번들러의 기능도 제공한다.

SWC는 단일 스레드에서는 Babel보다 20배 빠르고 , 4개 코어에서는 70배 빠르다.

 

• 컴파일 - 한 언어로 작성된 코드를 다른 언어의 코드로 변환(타입스크립트 파일을 자바스크립트 파일로 변환)
• 트랜스파일 - 컴파일의 하위분류. 유사한 두 언어 사이에서 변환(JS 최신 문법을 구형 문법으로 변환)
• 번들러 - 분리된 모듈을 하나의 모듈로 묶어줌(웹팩)

---

Next.js의 SWC 도입

Next.js에 SWC를 도입함으로써 Babel과 Terser를 대체하였다.

Babel과 Terser가 뭔지 알아보자.

 

Babel

ES6의 등장으로 JS 언어에 새로운 문법이 많이 생겨났다.

하지만 JS의 최신 문법은 구형 브라우저에서는 돌아가지 않는다는 한계가 존재한다.

이런 한계를 해결해주는 빌드 툴이 Babel이다.

(자세히 말하면 트랜스파일러)

Babel은 최신 문법을 구형 문법으로 변환해주기 때문에, 개발할 때 최신 문법을 사용할 수 있게 해준다.

 

 

Terser

대부분의 프레임워크에서는 이미 Terser에 대한 세팅이 기본적으로 되었다.

공식문서에서는 Terser를 아래와 같이 소개한다.

JavaScript mangler and compressor toolkit

 

🤔 mangler?

mangle의 뜻은 '심하게 훼손하다'이고 mangler의 뜻은 '망가뜨리는 사람'이다.

즉, 우리의 JS 코드를 훼손하고 망가뜨린다고 볼 수 있다.

우리는 다른 사람들이 쉽게 알아보도록 변수/함수 이름을 의미있게 지어야한다.

사람을 위해서이지 컴퓨터를 위한 일은 아니다.

컴퓨터의 입장에서 변수의 이름이 isComputer이든 a이든 상관이 없다.

오히려 a라는 변수가 10글자인 isComputer 변수보다 메모리를 적게 사용해서 좋다.

 

이렇게 변수/함수의 이름을 단순하게 바꿈으로써 코드 최적화를 진행하는 것을 뜻한다.

 

🤔 compressor?

compressor의 뜻은 '압축기'이다.

즉, 코드를 압축해주는 것을 의미한다.

if 조건 문을 && 연산자나 || 연산자로 변경하고, 사용하지 않는 함수나 return 값을 제거하는 등,

같은 기능을 하는 더 짧은 코드로 변환해준다.

 

SWC는 Next.js에서 쓰임

SWC를 통해 바벨과 Terser 대체함

바벨은 트랜스파일링, Terser는 코드 경량화를 수행했음

Next.js는 Babel을 SWC로 대체하였는데, 트랜스파일링이 17배나 빨라졌다.

 

Terser는 코드 경량화(minification) 작업을 하는 툴이다.

 

Babel의 한계점

1. Babel로 변경된 코드를 이해하기 어렵다.

2. 코드의 크기가 늘어난다.

3. Polyfill을 사용해서 Babel이 지원해주지 않는 범위까지 변환해야한다.

4. JS 기반이기 때문에, Babel이 트랜스파일링 하는 동안 JS 스레드는 다른 작업을 하지 못한다.

 

Terser의 한계점

1. 코드를 압축하는 과정에서 난독화를 진행하는데, 코드의 가독성이 심각하게 안좋아진다.

2. 문법적 최적화를 진행하기 때문에, 런타임 최적화에는 한계가 존재한다.

 

 

SWC의 장점(위의 한계점 극복 위주)

• SWC는 성능 최적화를 중점으로 코드의 가독성을 가능한 유지한다.
• 효율적인 트랜스파일링과 압축 기법을 사용하여 코드 크기를 최소화하는데,
  Terser와 달리 자체적으로 효율적인 코드를 생성하기 때문에 최소한으로 Polyfill을 사용한다.
• 런타임 시 필요하지 않은 코드까지 최적화한다.
• JS가 아닌 Rust로 개발되었다.

---

SWC 기능

transform

Babel을 대체하여 JS 코드를 트랜스파일링한다.

비동기로 동작하며 멀티 쓰레드에서 실행되기 때문에 컴파일 과정이 매우 빠르다.

Rust로 작성해서 JS 코드와 다른 스레드에서 돌아간다.

transform이 실행 중이여도 JS 코드가 실행이 될 수 있다.

 

minify 

Terser를 대체하여, 자바스크립트 코드를 압축하고 난독화한다.

비동기로 동작하며 멀티 쓰레드에서 실행되기 때문에 빠르게 압축 작업을 진행한다.

---

SWC는 왜 빠를까?

SWC는 Rust라는 언어로 개발되었다.(개발한 사람은 한국인인 강동윤님이다!)

 

JS는 이벤트 루프 기반의 싱글 스레드 언어이다.

Babel과 Terser를 사용하더라도 한 번에 한 개의 파일만 변환할 수 있다.

 

Rust는 병렬 처리를 하는 언어로 멀티 스레드를 사용한다.

따라서 SWC는 동시에 여러 파일들을 변환하기 때문에 빠르다.

 

멀티 스레드 환경에서만 SWC가 빠른 것도 아니다.

싱글 스레드인 환경에서도 SWC가 바벨보다 20배 빠르다.

 

🤔 Rust는 도대체 어떤 언어일까?

Mozilla에서 개발한 언어로 C++과 비슷한 성능을 가진다.

Rust의 장점들은 다음과 같다.

• 메모리 안정성
  가비지 컬렉터를 사용하지 않고, 소유권 시스템을 통해 메모리 안정성을 보장한다.
  • 소유권 시스템 - 메모리 상의 값은 하나의 소유자만 가질 수 있고, 소유자가 값의 사용 범위를 벗어나면 자동으로 메모리가 해제된다. 
• 교차 플랫폼 
  다양한 플롯폼(window, macOS, linux 등)에서 동작할 수 있다.
• 병렬 처리와 동시성
  데이터 레이스(동시에 여러 스레드가 같은 메모리에 접근하여 생기는 문제)를 컴파일러가 체크한다.
• 높은 성능
  C/C++과 유사한 성능을 제공한다.