번들러(Bundler)

최근에 react 프로젝트를 하면서 ide로 자동으로 typescript의 react를 다운받고 있는데 의존성문제의 이슈가 발생하였다.
그러던 와중에 vite라는 것을 알게되었고 vite + react 이렇게 프로젝트를 구성하였었다.

vite 또한 번들러의 하나라고 하는데 과연 번들러란 무엇일까?

우선 vite 는 무엇인가에 대하여 설명하자면

vite

• dev 서버 실행속도를 개선하기위해 사용하고, 의존성과 소스 코드를 나눠서 속도를 개선한다. 그리고 코드 수정 시 자동으로 재빌드하는 HMR 기능을 제공한다.

Bundler

• 번들러는 여러 개의 모듈화된 자바스크립트 파일들을 하나로 합치는 역할을 해준다.
• 각 모듈간의 충돌 가능성을 해결해준다.
• 다량의 모듈 파일을 전송할 때 생기는 딜레이에 대한 문제를 해결해준다.
• 브라우저가 이해할 수 없는 확장자(tsx, jsx 등)을 js 파일로 변환해준다. process.env… 등의 Environment variable 의 값을 치환해주는 것도 번들러다.
• node_moudles에 패키지들을 설치해준다. ‘node_modules’의 버전과 패키지의 버전이 일치하는지 확인하고 관리한다.

브라우저는 모듈화된 자바스크립트를 읽지 못하는데, 브라우저에서는 코드를 실행하려면 번들러가 필요하다. 그런데 왜 그전에는 실행이 됐을까?
보통 Create React App(CRA)로 프로젝트를 생성을 한다. 하지만 CRA 를 하게된다면 package-lock.json 파일을 보면
"webpack" 이 설치되어있는 것을 볼 수 있다.
이 webpack 또한 번들러의 종류중 하나이다.하지만 webpack은 오래됐을 뿐더러 사용방법에 대한 글들은 많지만 설정이 복잡하고 느리다는 점이 있다.
vite는 설정이 쉬우며, 가볍고 빠르다. 그렇기에 webpack 대신 vite와 react를 통해 프로젝트를 생성하였다.

그 외의 번들러들은

• Webpack
• Rollup
• Esbuild
• Vite
  등이 있다. 목적에 의해 공식문서를 참고하여 사용하면 좋을 것 같다.