webpack에서 vite로 마이그레이션하기

GIS 기반 데이터를 가지고 있는 프로젝트여서 로컬에서 개발서버를 띄우면 느린 속도에 답답함을 느꼈습니다.

개발 생산성을 높이고자 기존에 사용중이였던 webpack에서 vite로 마이그레이션을 시도했습니다.

기존 webpack, rollup, parcel과 같은 번들러입니다.

다른 툴과는 다르게 더 빠르게 server를 실행하고 *hot-module-replacement가 빠르다고 합니다.

*HMR(Hot Module Replacement)
전체 페이지를 로드하지 않고 애플리케이션의 변경사항을 추적하여 수정된 부분만 로드한다.
HMR API는 수동으로 구성할 필요없이 애플리케이션 설치 중에 자동으로 추가된다.

브라우저가 ES Modules를 지원함에 따라 일반적인 번들링 과정을 생략하게 됩니다.

기존 방법은 모든 파일을 번들링 한 후 서버실행을 한다면,

vite는 서버만 바로 시작하고 그 후에 파일에 떨어지므로 더 빠른 dev-server가 가능합니다.

CRA와 비슷하게 Vite에서 제공하는 vanilla 기반으로 만들었습니다.

npm create vite@latest 프로젝트명 --template vanilla

index.html 및 프로젝트 루트

vite 프로젝트에서는 public directory 내부 대신에 index.html은 아래와 같이 설정됩니다.

index.html은 소스코드, 모듈 그래프 일부로 취급되며

vite.config.js에서

mode가 'dev'인 경우 별칭을 만들어 파일 경로를 단축하여 작성할 수 있도록 했습니다.

vite가 webpack보다 빠르다는 것을 확인할 수 있었습니다.

참고

개발 노트