주제: 번들러(vite)

링크.

vite를 사용해야 하는 이유 - 공식문서

https://ko.vitejs.dev/guide/comparisons.html

webpack에서 vite로 마이그레이션

• https://engineering.ab180.co/stories/webpack-to-vite

• https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/

• https://sendbird.com/ko/blog/sendbird-%EB%8C%80%EC%8B%9C%EB%B3%B4%EB%93%9C%EC%9D%98-vite-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98

webpack과 vite의 성능 비교하기

https://hi-develop.tistory.com/22

요약.

문제점

- ESM을 지원하기 전까지 JS 모듈 시스템을 위해 번들러를 사용해야 했다.

- webpack, rollup, parcel 등이 번들링 작업을 진행

- 모듈의 개수가 극적으로 증가 -> 성능 병목 현상 => 느린 피드백으로 개발자의 생산성 저하

- 번들러 기반의 도구의 경우 앱 내 모든 소스 코드에 대한 크롤링 및 빌드 작업을 마쳐야 한다.

해결 방법

- dependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선

- 즉, 내용이 자주 바뀌는지 아닌 지에 따라 카테고리를 나눔

- Esbuild를 사용한 사전 번들링 기능 -> webpack, parcel 대비 10-100배 빠른 속도

- ESM을 사용한 HMR을 지원

- 모든 파일에 대한 번들링을 매번 수행해야 하는 점을 개선

- HTTP 헤더를 활용하여 전체 페이지의 로드 속도 향상

- 개발 서버와 프로덕션 빌드 간의 일관성을 보장하기 위해 빌드 커맨드와 빌드 퍼포먼스 최적화를 진행

마이그레이션 트러블 슈팅

- 환경변수

- process가 아닌 import.env로 접근하기

- ESM을 지원하지 않는 플러그인

결론 || 느낀점.

프로젝트를 할 때 CRA로 할지 vite로 할지 고민했습니다. 보일러 플레이트를 사용하면 더 쉽게 시작할 수 있지만, 하나하나 설정을 하면서 알아가고 싶었기 때문입니다. 그리고 webpack의 경우 여러 설정들을 해줘야 하고 그에 대해 하나도 몰랐기 때문에, 비교적 설정이 쉽다는 vite를 선택했습니다. 그래서 여유가 될 때 vite에 대해서 좀 더 공부하고자 알아보고 있는데, 좀 더 시각화가 가능할 정도로 깊게 탐색하고 싶습니다. 다음에는 vite와 webpack 설정에 대한 비교를 해보려고 합니다.