Webpack to Vite Migration

릴레잇의 JS 번들러가 Webpack에서 Vite로 마이그레이션하게 되었다. Vite가 왜 더 좋은 선택이었고 그 선택이 옳은 선택이었는지에 대해서 적어본다. (Vite의 주력 무기인 ESM 서버가 적용되었으며, 사용자가 아닌 개발자로서 주로 사용하는 Development 서버에 대한 설명과 변화를 주로 다룬다.)

Why choose Vite over Webpack?

tl;dr 앱 빌드 속도가 더 빠르기 때문에.

Webpack은 bundle based로, 서버 시작 시 모든 라우트의 모든 모듈을 번들링하고 나서 빌드를 완료한다.

그 반면, Vite는 ESM based이다.

1. Esbuild를 사용하여 불변하는 의존 파일들을 사전에 번들링한다. 여기서 Esbuild는 자바스크립트가 아닌 Go를 사용했는데, 빌드 속도가 Webpack, Parcel 등 기존의 번들러 대비 10-100배 빠르다고 한다.
2. 컴파일링이 필요한 Vue, CSS코드 및 plain JS 코드는 Native ESM(ES Modules)으로 제공된다. 브라우저에서 어떤 모듈에 대한 소스 코드가 필요해질 때 전달하는 식으로, 보이는 컴포넌트 상에서 사용되는 코드만 서버에 요청하는 구조다.

+Esbuild의 코드분할 및 CSS처리가 아직 안정적이지 않아 배포용 Production 빌드에서는 Esbuild가 아닌 Rollup을 사용해서 번들링을 하고 있다.

결과

Vite를 사용해서 빌드하게 되자 빌드 시간이 현저하게 줄어들었다. 릴레잇 자체가 용량이 큰 앱이 아니기 때문에 객관적인 시간으로는 6초 정도에서 2초 내외로 줄어들었지만, Hot reload부분에서도 도움이 되었고, 이전의 빌드 시간에 익숙해져 있던 나로서는 오히려 그 시간마저 단축되자 감사하게 느껴졌다. 더 큰 규모의 어플리케이션에서는 얼마나 혁신적일까 궁금하다.

---

참고
Why Vite