Webpack의 작동 방식

webpack은 모든 모듈을 분석하고 번들링하는 과정을 거칩니다.

1. 모든 파일을 읽고 의존성 그래프를 구축
2. 각 모듈을 변환하고 번들로 묶음
3. 최종 번들을 생성

이 과정은 프로젝트 규모가 커질수록 오래 걸리게 됩니다.

Vite가 Webpack보다 더 빠른 이유

vite는 다음과 같은 방식으로 성능을 크게 향상시켰습니다.

• ES 모듈 활용: 브라우저의 네이티브 ES 모듈 기능을 활용합니다. 개발 중에는 번들링 과정 없이 필요한 모듈만 즉시 제공합니다.
  • webpack은 모든 모듈을 번들링하는 과정을 거칩니다.
• 사전 번들링: 의존성 모듈을 미리 번들링하여 성능을 최적화합니다. 이 과정에서 esbuild를 사용하여 매우 빠른 속도를 제공합니다.
  • esbuild: Go로 작성된 빠른 번들러 / JavaScript 기반 번들러보다 10-100배 빠른 성능을 제공
• 지연 로딩: 필요한 모듈만 그때그때 로드하므로, 초기 로딩 시간이 크게 단축됩니다.
  • webpack은 기본적으로 모든 모듈을 한 번에 로드합니다.
• HMR 최적화: 변경된 모듈만 교체하여 매우 빠른 Hot Module Replacement를 제공합니다.
• 간소화된 설정: vite는 기본적으로 최적화된 설정을 제공하여 추가 설정없이도 빠른 성능을 보여줍니다.
  • webpack은 종종 복잡한 설정이 필요하며, 이는 성능에 영향을 줄 수 있습니다.