Webpack vs Vite

참고

[ 문제 사항 제시 ]

Webpack을 사용한 React 개발에서는, Webpack이 전체 JavaScript 파일을 크롤링하여 애플리케이션을 제공하기 때문에 개발 서버를 실행하는데 많은 시간이 소모가 된다.

뿐만아니라, JavaScript 코드를 Webpack을 사용하여 번들링하고, 서버에서는 번들링된 파일을 다시 브라우저에 반영하기 위해 약 10초의 시간이 더 소모된다고 한다.

[ 해결책 ]

Webpack과 같은 번들링 도구인 Vite는

위에 언급한 Webpack의 단점으로인한 개발자들의 경험을 높이기 위해 탄생하였다.

• 브라우저에서 ES 모듈을 사용할 수 있다.
  • webpack은 기본으로 commonjs로 번들링이된다. 하지만 vite는 esmodule을 기본으로 번들링한다.
• esbuild와 같은 기본 번들러 도구로 컴파일할 수 있다.
  • esbuild를 사용하여 node_modules 폴더에서 가져온 JavaScript 모듈을 번들링하여 Webpack보다 10 ~ 100 배 더 빠르게 동작한다.

Webpack은 브라우저 요청 전에 전체 JavaScript 모듈을 번들링하지만, Vite는 브라우저 요청 전에 node_modules 모듈만 번들링한다 ( 무려 10 ~ 100 배 빠른 속도 )