VibeCoding 365 로고 VibeCoding 365

바이브 코딩 사전

지연 로딩

바이브 코딩 사전

지연 로딩

영어 표기

Lazy Loading

예시

상품 상세 페이지에서 추천 상품 캐러셀은 첫 화면 아래에 있으므로, AI에게 해당 컴포넌트를 동적 import로 분리하고 스켈레톤 로딩 UI를 추가하라고 지시한다.

참고

초기 화면 성능을 개선하지만 로딩 상태 UX가 함께 필요하다.

사용자가 당장 보거나 쓰지 않는 코드, 이미지, 데이터를 처음부터 모두 불러오지 않고 필요한 순간에 나누어 불러오는 성능 최적화 방법이다. 첫 화면에 필요 없는 관리자 패널, 긴 댓글 목록, 큰 이미지 갤러리를 지연 로딩하면 초기 로딩 시간이 줄어든다. 바이브 코딩에서는 AI가 모든 컴포넌트를 한 파일에 붙여 넣어 첫 로딩을 무겁게 만들 수 있으므로, 화면에 바로 필요한 부분과 나중에 필요한 부분을 나누라고 요구하는 것이 중요하다. 단, 너무 늦게 불러오면 클릭 후 빈 화면이 보일 수 있어 로딩 상태와 오류 처리를 함께 설계해야 한다.

카테고리
성능·최적화
난이도
basic
태그
지연로딩 · 코드분할
슬러그
lazy-loading
상태
published
정렬 순서
179