오늘의 블로그 읽기 20231122

주제: 번들러(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 설정에 대한 비교를 해보려고 합니다.