VibeCoding 365 로고 VibeCoding 365

바이브 코딩 사전

번들 크기

바이브 코딩 사전

번들 크기

영어 표기

Bundle Size

예시

AI가 차트 하나를 위해 무거운 시각화 라이브러리를 추가했다면, 빌드 분석에서 번들 크기 증가를 확인하고 단순 SVG 컴포넌트나 필요한 모듈만 import하는 방식으로 줄인다.

참고

기능 추가 후 성능 회귀를 확인하는 가장 기본적인 지표 중 하나.

웹 앱을 브라우저가 내려받아 실행해야 하는 JavaScript, CSS, 이미지 같은 파일 묶음의 전체 크기이다. 번들 크기가 커지면 첫 화면이 늦게 뜨고, 모바일 네트워크에서는 사용자가 로딩 중 이탈하기 쉽다. 바이브 코딩에서는 AI가 편의를 위해 큰 라이브러리를 쉽게 추가하거나 사용하지 않는 컴포넌트까지 한 번에 import할 수 있으므로, 기능이 동작한 뒤에도 번들 크기 변화를 확인해야 한다. 좋은 기준은 새 기능을 붙일 때 필요한 라이브러리만 추가하고, 빌드 결과에서 큰 청크가 생기면 코드 분할이나 더 가벼운 구현을 검토하는 것이다.

카테고리
성능·최적화
난이도
basic
태그
번들크기 · 웹성능
슬러그
bundle-size
상태
published
정렬 순서
178