[Vite] Vite가 나타나게 된 계기 ( feat. 번들러의 역사 )

 

 

 

Vite가 엄청 떠오르고 있습니다. 최신 번들러 들 중 가장 빠르다고 하는데 대체 왜 빠른 걸까요??

 

 

---

 

 

1.  번들러가 나오게 된 계기

 

 ES6가 나타나면서 자바스크립트에서 ESM (ES Modules)를 지원합니다. ESM은 간단하게 말하면 자바스크립트가 모듈화를 할 수 있도록 export / import 기능을 지원하고 <script> 간 모듈을 내보낼 수 있게 된 것입니다. ESM이 지원되면서 웹 브라우저에서 더 많은 기능들과 많은 활동들이 나타났고 관리해야 하는 소스 코드나 라이브러리들이 늘어나게 되었습니다. 그래서 더 효율 적인 관리 툴이 필요하게 되었습니다.

 

 

 

2. WebPack의 등장

 

 WebPack은 여러 파일과 에셋들을 번들로 합치고 최적화하여 브라우저에서 사용할 수 있게 제공합니다. 압축의 개념으로 볼 수 있습니다. 이를 통해 효율적으로 코드를 관리합니다. 특히 SPA 들에서 큰 빛을 발휘하였습니다. 추가적으로 웹팩은 소스 코드의 변화가 새로고침 없이 브라우저에 바로 반영될 수 있게 하는 HMR 기능과 코드를 여러 개의 번들 파일로 나누어 필요한 시점에 로드할 수 있도록 하는 기능 Code Splitting 등을 지원합니다. 이 장점들 때문에 웹팩이 필수가 되었다고 해도 무방할 정도로 대부분의 프론트엔드 개발에서 사용하게 되었습니다.

 

 

 

3. WebPack보다 100배 빠른 ES build의 등장

 

웹팩보다 훨씬 빠르고 효율적인 녀석이 나타났습니다. ES Build는 웹팩보다 빌드 타임이 100배 가량 빠릅니다. 그 이유는 다음과 같습니다.

 

• 네이티브 코드로 컴파일되는 Go 언어로 작성 
• 파싱, 링크 , 코드 생성 모두를 병렬 처리 (CPU 활용도 최대)
• 효율적인 메모리 사용
• 불필요한 데이터 변환 / 할당 없음

 

 

4. 가장 빠르고 효율적인 Vite

 

Vite는 위에 나타난 번들링 툴들의 단점들을 보완합니다. 그래서 왜 Vite가 빠르고 요즘 많이 사용하는 걸까요??

이 이유는 다음과 같습니다.

 

• ES build 사용 - “pre-bundling” 작업을 WebPack보다 훨씬 빠른 ES build를 바탕으로 진행한다.
• Native ESM 사용 - 코드 수정이 있을 때 브라우저에서 변경 된 부분을 먼저 요청하고 교체된 부분만 전달

 

 

새로운 프로젝트를 하게 된다면 모듈 번들러로 Vite를 선택하는 것을 추천드립니다!