[MFA] 트랜스파일러(Transpiler), 번들러(Bundler) 특징 (Babel, SWC, webpack, Vite)

트랜스파일러(Transpiler)

• JS 코드를 다른 버전의 JS 코드로 변환하는 도구
• 주로 ES6이상의 JS를 지원하지 않는 브라우저 환경에서 ES6이상의 문법을 사용할 수 있게 해주는 도구

 

장점

• 지속적으로 업데이트되는 브라우저나, Node.js 환경에서 최신문법을 사용하더라도 이전 버전의 JS로 변환하여 여러 환경에서 코드를 실행할 수 있다.
• ECMAScript 표준을 사용할 수 있게 해 줘 표준화된 코드를 작성하고 유지할 수 있다.
• 다양한 플러그인을 지원하여 사용자가 필요한 트랜스파일 과정을 제어할 수 있다.

 

폴리필(Polyfill)

•  최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드

 

대표적인 트랜스 파일러 

Babel

• https://babeljs.io/
• 최신 자바스크립트 문법을 브라우저가 이이해할 수 있게 변환해 주는 대표적인 트랜스 파일러
• 설정파일에 plugin, preset의 정의하여 설정 파일을 바탕으로 문법을 변환한다.
• plugin : 하나의 특정한 변환 또는 특정 기능을 수행하는 모듈
• preset : 관련된 plugin의 묶음

 

SWC

• https://swc.rs/
• Rust로 만들어진 빠른 컴파일 속도를 가진 트랜스 파일러
  
  • 컴파일 : 고수준의 언어를 기계어나 저수준 언어로 변환하는 과정
• ECMAScript 표준 및 TypeScript를 지원한다.

 

 

번들러(Bundler)

• 웹 애플리케이션 여러 파일(HTML, CSS, JS, 이미지)을 하나의 번들 파일로 합치는 과정
• 애플리케이션의 로딩 속도를 개선하고 성능을 향상시키는데 도움을 준다.

 

번들러 장점

• 번들링을 진행하며 프로젝트 자원을 최적화 한다. (코드 압축, 이미지 최적화, 환경 변수 처리 등)
• 여러 개의 파일을 하나의 파일로 결합함으로써 네트워크에서의 로딩 속도를 최적화한다.
• 큰 번들 파일을 사용함으로써 브라우저 캐싱 효율이 향상된다.
• 코드 분할을 통해 애플리케이션의 논리적 부분을 나눌 수 있고, 초기 로딩 속도를 향상시켜 UX를 개선할 수있다.

 

대표적인 번들러

webpack

• https://webpack.kr/
• 애플리케이션의 파일들을 모듈 단위로 분리하고 의존성 그래프를 생성하여 번들 파일로 묶어주는 도구
• 다양한 loader와 plugin을 통해 유연한 설정이 가능하다.
• 모듈 페더레이션 기능을 제공 (추후 글 작성 예정..)
• 설정 옵션
  • entry: 번드링 프로세스에서 시작점을 나타내는 설정
  • output : 번들링된 결과물의 파일 경로와 이름등을 설정
  • loaders : js,json파일 이외에 파일을 처리할 수 있도록 도와주는 설정
  • plugins : 번들 최적화, 에샛관리, 환경 변수 주입등 작업 설정
  • mode : 실행되는 환경에 따라 모드를 설정

 

Rollup

• https://rollupjs.org/
• 표준 모듈 시스템 문법으로 작성된 여러개의 파일로 이루어진 코드를 묶어 주는 역할을 한다.
• 라이브러리 제작을 위한 번들러로 많이 사용된다.

 

esbuild

• Go 를 기반으로 만들어진 빠른 빌드 속도와 효율적인 번들링하는 트랜스 파일러
  • 빌드 : 소스 코드 및 리소스를 프로덕션 환경에서 실행 가능한 형태로 변환하는 과정 (컴파일, 번들링 등을 포함)
• 작은 라이브러리를 만드는용도로 사용
• 다른 번들러에 비해 일브 플러그인이 부족할수 있다. (아직 1버전 출시 안됨.)

 

Vite

• https://ko.vitejs.dev/
• 웹 프로젝트 개발 경험에 초점을 맞춰 개발된 빌드 도구 
• Vite가 Webpack 보다 빠른 이유
  • 콜드 스타트 방식으로 개발 서버를 구동할 때, dependencies와 source code 두 가지 카테고리로 나누어 시작 시간을 개선
    • (콜드 스타트 : 최초로 시행되어 이전에 캐싱한 데이터가 없는 경우)  
  • 로컬 개발시 ESM 방식을 사용하여 로컬 서버 구동 속도가 매우 빠르다.
    • (ESM : 모듈화 문법인 import,export를 별도의 도구 없이 브라우저 자체에서 소화해 낼수 있는 모듈 방식)
  • 웹팩은 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하다. 비트는 필요한 모듈을 빠르게 번들링해서 사용한다.
• node 18버전 이상 필요