vite?
- Vite는 네이트브 ES 모듈을 사용하여 개발 시 브라우저가 직접 모듈을 로드할 수 있게 하여, 시작 시간을 대폭 단축한다
- 변경된 부분만 빠르게 적용해주어 개발 과정에서 바로 결과를 볼 수 있게 한다
- 프로덕션을 위해 Rollup을 사용하여 코드를 최적화하고, 애플리케이션을 빠르게 로딩할 수 있는 작은 크기의 패키지로 만든다
- 필요에 따라 다양한 기능을 추가할 수 있는 플러그인 시스템을 갖추고 있어, 다양한 개발 요구 사항을 충족한다
- 기본 설정이 이미 최적화되어 있어 복잡한 설정 없이 바로 시작할 수 있다
webpack?
- 여러 파일과 모듈을 하나 또는 여러 개의 파일로 합쳐, 웹사이트가 빠르게 로드할 수 있도록 최적화한다
- JavaScript, CSS, 이미지등 다양한 유형의 파일을 처리할 수 있는 로더를 제공한다
- 번들 과정을 맞춤화하고 확장할 수 있는 플러그인 시스템을 통해, 다양한 작업을 자동화 하고 최적화 한다
- 개발 중 실시간으로 변화를 확인할 수 있는 개발 서버와 HMR 기능을 제공한다
- 애플리케이션을 여러 조각으로 나누어 필요할 때마다 로드할 수 있게 해, 성능을 개선한다
vite vs webpack
- 개발 속도
- vite : ES모듈을 사용하여 브라우저가 모듈을 직접 로드할 수 있게 하여, 개발 시작 속도가 매우 빠르다
- webpack : 모든 모듈을 미리 번들링하기 때문에 시작 속도가 느릴 수 있다
- 빌드 시간
- vite : Rollup을 사용하는 최적화된 프로덕션 빌드로 빠르게 전환할 수 있어 빌드 시간이 짧다
- webpack : 빌드 과정이 복잡하고 시간이 더 걸릴 수 있다
- 핫 모듈 교체(HMR)
- vite : 매우 빠른 HMR을 제공하여 실시간으로 모듈을 업데이트한다
- webpack : HMR을 지원하지만 vite만큼 빠르지 않을 수 있다
- 구성
- vite : 간경하고 쉬운 구성을 제공하여 사용이 더 편리하다
- webpack : 매우 유연하고 구성 가능성이 높지만 설정이 복잡하다
vite는 개발 속도와 편리함을 중시, webpack은 더 많은 구성 옵션과 호환성을 제공한다.
