[단어장] Bundler, Transpiler, Loader

이번주는 공부중인 웹 번들링 3인방이다.

---

번들러 (Bundler)

번들러란 여러 파일을 하나의 파일로 합치는 프로그램이다.

예를 들어 React의 경우 다양한 컴포넌트들의 조합으로 페이지가 구성이 되는데,
Static한 페이지를 만든다면 여러 js파일을 다운로드받는 것보다 하나의 js파일을 받는것이 좋다.
브라우저에서 여러개의 파일을 서버에 요청해서 받는 것이 성능에 좋지 않기 때문이다.

물론 하나의 번들링된 파일을 여러개로 쪼개서 필요한 부분만 불러올 수 있도록 하는
Code splitting이라는 과정도 있다.
하지만 이건 일단 논외

---

트랜스파일러 (Transpiler)

눈치가 좋다면 알겠지만 컴파일러와 단어가 유사하다.

다만 컴파일러와 다른점은,
컴파일러가 다른 언어로 변환하는 것이라면 (c -> 어셈블리),
트랜스파일러는 비슷한 추상화를 가진 언어로 변환한다.

예를 들면 ES6+로 된 JS코드를 ES5로 바꾸는 것이 있다.
브라우저는 ES6를 이해하지 못하므로 ES5로 코드를 변환하는 것이다.
둘다 JS이기 때문에 컴파일이 아닌 트랜스파일이라고 한다.

다른 예로는 Typescript를 Javascript로 변환하는 것도 있다.

---

로더 (Loader)

로더란, 번들링 과정에서 특정한 파일 형식을 해석하는 역할이다.

예를 들어 webpack으로 번들링을 하던중 svg파일을 만났다.
하지만 웹팩은 자바스크립트만 알기 때문에, 이 파일을 해석할 수 없다.
그래서 이 확장자에 대해 아웃소싱을 주어 해석하도록 한다.

일종의 해석 플러그인이다.