💻 20240514 번들러 Vite에 대해 알아보자

📌 참조

Vite 공식문서 - Vite를 사용해야 하는 이유
차세대 번들러 비교

---

📌 개요

• 기존에 만든 커스텀 보일러 플레이트에서 Webpack을 통해 번들링 하고 있었다.
• 당시, 번들 사이즈 축소를 통한 성능 향상에 힘을 썼으나 큰 변화는 없었다.
• 근래, Vite라는 번들러가 핫하다는 이야기를 들었고 맛보고자 Docs를 훑어 봤다.
• Rollup의 빠른 번들 속도와 Webpack에 거대한 생태계, 중용점을 지향하는 느낌
• 이것이 요즘 Vite가 핫한 이유이지 않을까라는 개인적인 생각이 들었다.

이런 개요는 충분히 흥미로 이어졌고 Vite를 조금 더 파보기로 결심했다.

---

📌 Vite 파헤치기

📌 개발 서버 구동 향상

기존 도구의 문제점

• 콜드 스타트 방식으로 개발 서버 구동
• 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업 진행
• 작업 완료 이 후, 실제 페이지 제공텍스트

Vite 개선 포인트 (1) - 카테고리 분리

• Dependencies, Source Code 카테고리 분리
• 카테고리별 최적화 된 소스코드 빌드 제공
• 이를 통해 개발 서버 구동 향상

Vite 개선 포인트 (1-1) - Dependencies

• 사전 번들링 : 변하지 않는 종속성 코드들을 사전에 번들링함
• Esbuild : Go로 작성된 고성능 번들러, 10-100배 개선

Vite 개선 포인트 (1-2) - Sourcecode

• 브라우저의 발달 : ESM 표준으로 사용
• Vite 번들링 코드 ESM으로 제공, 브라우저가 번들러의 작업 일부 차지

📌 번들링 차별화

ESM 기반 번들링

• 브라우저 친화적인 ESM 기반 번들링
• ESM 기반 번들링 문제점 파악, 자체적인 최적화 된 개발 / 운영 빌드 제공

Rollup 기반 빌드

• 성능과 유연성 비교 했을때, 현재는 Esbuild보다 Rollup이 낫다고 판단
• 개선을 위해 지속적인 노력중

대폭적인 개발 서버 구동 향상이 되었다는 개념은 인지했다.
하지만, 아직, 빌드 최적화에 대한 부분은 물음표이다.
Rollup vs Webpack 비교를 통해 Vite를 어떤 프로젝트 일 때
도입하면 좋을지 결론이 나올 것 같다.

---

📌 Webpack vs Rollup

📌 Webpack

• CommonJS 기반의 빌드 (Webpack v5부터 ESM 지원)
• 거대한 생태계
• 간편하고 직관적인 설정
• 풍부한 plugins과 loaders
• 목표 : 통합

📌 Rollup

• ESM 기반의 빌드
• 간편하고 직관적인 설정
• 목표 : 확장

---

📌 결론

• 무언가 만들때, 비전, 목표가 그 제품을 형성한다.
• Webpack은 CommonJS 기반의 통합 환경을 목표로 잡았다.
• Webpack은 통합을 이루었으니, 이 후, 성능 개선에 집중하고 있다.
• Rollup은 ESM 기반의 확장을 목표로 잡았다.
• Rollup은 라이브러리 만드는데 친화적이며, 그렇기에 성능적으로 유리하다.
• Webpack과 Rollup의 중용점을 지향하는 번들러가 Vite라고 생각한다.
• Webpack의 개선이냐, Vite의 통합 목표로 인한 혁신이냐, 결론이 궁금하다.

내용을 정리하자면 아래와 같을 것 같다.
1. 대형 애플리케이션 : Webpack
2. 소규모 애플리케이션 : Vite
3. 라이브러리 : Vite or Rollup