Vite 쉽게 이해하기
Webpack이나 Create React App과 같은 기존 도구들은 먼저 프로젝트 전체를 번들링하는 방식으로 작동합니다. 이 도구들은 모든 파일을 읽어 하나의 거대한 JavaScript 파일로 변환합니다. 소규모 프로젝트에서는 이 방식이 잘 작동하지만, 대규모 프로젝트에서는 문제가 발생합니다. 대규모 프로젝트에서는 이 과정에 수 초가 소요됩니다. 파일을 저장할 때마다 도구는 그 작업의 상당 부분을 다시 수행해야 합니다.
Vite는 다르게 작동합니다. 최신 브라우저는 ES modules를 네이티브로 지원합니다. 이는 브라우저가 스스로 import와 export를 처리할 수 있음을 의미합니다. Vite는 개발 중에 코드를 번들링하지 않습니다. 브라우저가 요청할 때만 각 파일을 별도의 모듈로 제공합니다.
뷔페 식당을 생각해보세요. 요리사는 문을 열기 전에 모든 음식을 미리 다 만들어 놓습니다. 만약 작은 변화 하나를 원한다면, 요리사는 뷔페 전체를 다시 준비해야 합니다. 이것이 Webpack이 작동하는 방식입니다. 프로젝트가 커질수록 기다리는 시간도 길어집니다.
Vite는 단품 요리(à la carte) 식당과 같습니다. 문은 즉시 열립니다. 요리 하나를 주문하면, 요리사는 그 요리만 준비합니다. 나중에 디저트를 원하면 요리사는 디저트만 준비합니다. 전체 메뉴가 준비될 때까지 기다릴 필요가 없습니다.
Vite는 두 가지 서로 다른 니즈를 위해 두 가지 다른 전략을 사용합니다:
Development (vite dev) • 전략: 번들링 없이 네이티브 ESM 모듈을 제공합니다. • 시작 속도: 즉각적입니다. 프로젝트 크기에 영향을 받지 않습니다. • 이유: 컴퓨터 내의 로컬 HTTP 요청은 매우 빠르기 때문입니다.
Production (vite build) • 전략: Rolldown을 사용하여 모든 것을 번들링합니다. • 시작 속도: 프로젝트 크기에 따라 시간이 늘어납니다. • 이유: 수백 개의 개별 파일은 사용자에게 너무 많은 HTTP 요청을 발생시킵니다. 번들링이 이 문제를 해결합니다.
Vite는 코딩할 때는 속도를, 배포할 때는 효율성을 제공합니다.