Vue-CLI에서 Vite로 옮긴 후기

기존에 이 블로그는 Vue-CLI를 사용해 프로젝트를 셋업했었는데, Vue 3가 프리뷰 단계일 때부터 사용했더니 최근에 취약한 패키지들이 발생하는데 이를 업데이트할 수 없는 문제가 지속적으로 발생했다. 이 문제도 해결할 겸 요즘 꽤 인기를 얻고 있는 Vite를 사용해 프로젝트 셋업을 바꿔보기로 했다.

Vite?

Vite는 vue의 창시자 Evan You의 주도로 개발되고 있는 차세대 프론트엔드 빌드 툴이다. 기존의 웹팩과 같은 번들링 툴은 프론트엔드에서 ES Module을 사용할 수 있게 해 생태계를 확장시키는데 엄청난 기여를 했지만 프로젝트가 커짐에 따라 데브 서버를 키는 속도가 점점 느려지는 문제가 있었다. 또한 HMR(Hot Module Reloading)에 걸리는 시간도 애플리케이션이 커짐에 따라 더 길어지게 되었다.

Vite는 이 문제를 네이티브 ESM을 사용해 필요한 모듈을 그때그때 불러오도록 해 개발 서버의 시작시간을 프로젝트의 크기와 상관없이 빠르게 유지시켜준다. 또한 esbuild를 사용해 기존의 번들러보다 훨씬 빠른 속도를 보여준다(다만 production build에서는 아직 rollup을 사용중이라고 한다).

Vue-CLI에서 Vite로 옮기기

Vue-CLI를 사용한 프로젝트에서 Vite로 옮기는 과정은 대부분 이 글을 그대로 따라 했다. Vite를 사용할 때 특기할 만한 점들은 아래와 같다.

1. index.html 파일을 프로젝트의 엔트리 파일로 사용한다. 따라서 index.html 파일이 루트 디렉토리에 있어야하고 메인 스크립트를 index.html에서 호출해야한다.
2. process 대신 import.meta를 사용한다.
3. 구형 브라우저를 기본적으로 지원하지 않는다. 다만 이를 위한 플러그인이 존재한다.

해당 글을 따라하면 기본적인 부분은 전부 작동을 하는 것을 알 수 있다. 다만 내 프로젝트에서는 몇가지 추가적인 작업이 필요했다.

1. Static asset을 관리하기 위해 사용하던 require 대신 아이콘을 /public 폴더로 옮기고 url을 통해 아이콘을 이용하도록 변경했다.🔗
2. 빌드 시 압축 파일을 생성하기 위해 vite-plugin-compression 플러그인을 사용했다.
3. Webpack 플러그인으로 사용중이던 purgeCSS를 사용할 수 없게 되어 postCSS의 플러그인으로 대체했다. 🔗

Vite 사용 후기

위에서 언급한 것처럼 데브 서버를 키는 속도가 정말 빨라졌다. 체감상으로 Vue-CLI에서 HMR속도와 데브 서버를 키는 속도가 비슷하고, Vite의 HMR속도는 거의 순식간에 일어난다고 느껴졌다. Vite는 Vue뿐만 아니라 React나 Sevelte와 같은 다른 프론트엔드 프레임워크와도 사용이 가능하다고 하니 다음 프로젝트를 진행할 때도 특별한 이유가 없는 한은 계속해서 사용할 것 같다.