Vite

Vite 는 프랑스어로 '빠르다'를 뜻합니다. (veet) 에서 발음을 따왔다고 합니다. 빠르다는 뜻을 가진 이름에서 알 수 있듯이 Vite는 빠르고 간결한 개발 환경을 제공합니다.

• HMR(Hot Module Replacement) 제공
• 번들링 시, Rollup 기반의 다양한 빌드 명령어 사용가능

Vite 와 HMR

Vite 는 기존 HMR 의 한계를 극복했습니다. 기존의 번들러들은 HMR 을 지원하긴 했지만, 이는 종종 전체 애플리케이션의 재번들링이 되었고(필요한경우) 이로 인해, 지연이 발생하여 개발시 웹에서의 코드반영이 오래걸리는 경우가 많았습니다. 기존의 번들러들은 모든 소스코드를 처음부터 끝까지 번들링할 때가 있었습니다.

Vite 는 ESbuild 를 사용하여 dependencies 에 대한 사전 번들링을 진행하여, 로딩시간을 크게 줄일 수 있습니다.

Production 환경에서의 번들링

개발환경의 최적화와 더불어, Vite 는 프로덕션 환경에서도 번들링의 효율성을 높였습니다. Vite 는 트리 셰이킹, 지연 로딩, 청크 파일 등을 이용하여 최적화된 번들을 생성합니다.

Vite의 미래

Vite 는 현재 Rollup을 사용하여 번들링 작업을 합니다. 이는 Rollup 의 플러그인 API 및 생태계를 활용할 수 있다는 것을 의미합니다. Rollup 은 성능 개선을 지속적으로 해왔으며, Vite 에도 긍정적으로 영향을 끼칠 것으로 보입니다.

나의 생각

• Vite 는 기존 번들러들의 문제점들 중 구동 시간과 번들링 자체의 근본적인 문제를 ESM 및 네이티브 언어로 작성하여 해결했다.
• esbuild 를 번들러로 사용하지 못하는 것이 조금 아쉽지만, 앞으로 어떻게 변해갈지 지켜봐야겠다.
• 예전에도 Snowpack 이라는 네이티브 ESM 이라는 도구가 있었지만, 더 이상 지원되지 않으며, 현재는 Snowpack 의 개발자들은 Astro 를 개발하고 있다, Vite 도 같은 수순을 밟을 지는 모르겠다..