VIBECODING 365 / DICTIONARY

번들 크기

Bundle Size

기초 난이도: 기초태그: 번들크기 · 웹성능 · JavaScript

DEFINITION

정의

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

참고

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

ENGLISH

Bundle Size

EXAMPLE

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

NOTES

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

이어서 볼 문서

가이드로 이동 용어를 실제 작업 흐름에서 다시 보기

사전 정의를 읽은 뒤 바이브코딩 가이드에서 사용 맥락을 확인합니다.

질문하기 이 용어가 내 작업에서 어떻게 쓰이나요?

궁금한 맥락을 Q&A로 넘겨 구체적인 답변 흐름으로 이어갑니다.

RELATED TERMS

연관 용어

frontend 문서 객체 모델

Document Object Model (DOM)

웹 문서를 노드 트리로 다루는 플랫폼 중립 모델이다. WHATWG DOM 표준이 이벤트, 작업 중단, 노드 트리를 정의하며, 자바스크립트 언어 자체는 아니다.

프론트엔드·UI 변수

Variable

프로그램이 실행되는 동안 값을 이름으로 저장해 두는 기본 단위이다. 숫자, 문자열, 사용자 입력값, API 응답처럼 나중에 다시 써야 하는 데이터를 변수에 담는다. 바이브 코딩에서 AI가 만든 코드를 읽을 때 변수 이름을 보면 데이터가 어디에서 와서 어디로 전달되는지 추적할 수 있다. 초보자는 변수를 '값에 붙이는 라벨'로 이해하면 좋고, 의미 없는 이름보다 userName, totalPrice처럼 용도를 설명하는 이름을 쓰는 습관이 중요하다.

javascript 함수

Function

입력과 출력 관계가 분명한 작업을 이름 붙여 묶은 코드 단위. 정의와 호출이 다르며, 범위·클로저·화살표 함수가 함께 쓰인다.