빌드 / 최적화
번들 최적화(Bundle Optimization)
번들 최적화(Bundle Optimization)는 사용자가 내려받는 자바스크립트와 CSS 묶음의 크기, 개수, 실행 비용을 줄이는 작업입니다.
쉬운 설명
사용자가 내려받는 코드 묶음의 크기와 로딩 비용을 줄이는 작업.
배경과 쓰임까지 이해하기
조금 더 자세히
번들 최적화(Bundle Optimization)는 사용자가 내려받는 자바스크립트와 CSS 묶음의 크기, 개수, 실행 비용을 줄이는 작업입니다.
초기 로딩이 느리거나 Lighthouse 성능 점수가 낮거나, 큰 라이브러리가 페이지 전체에 실릴 때 중요해집니다.
번들링(Bundling)이 코드를 묶는 기본 과정이라면, 번들 최적화(Bundle Optimization)는 그 묶음을 더 작고 빠르게 만드는 개선 작업입니다.
실제로는 이렇게 만나요
번들 최적화(Bundle Optimization)은(는) 실제 작업 흐름에서 Bundling, Bundler, Vite 같은 개념과 함께 등장합니다.
- 이런 거 할 때 나와요 초기 로딩이 느리거나 Lighthouse 성능 점수가 낮거나, 큰 라이브러리가 페이지 전체에 실릴 때 중요해집니다.
- 이렇게 생겼어요 번들 최적화(Bundle Optimization)은(는) Bundling, Bundler, Vite 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 빌드 / 최적화 작업을 하다가 Bundling, Bundler, Vite를 확인하는 화면
헷갈리기 쉬운 점
번들링(Bundling)이 코드를 묶는 기본 과정이라면, 번들 최적화(Bundle Optimization)는 그 묶음을 더 작고 빠르게 만드는 개선 작업입니다.
왜 알아두면 좋을까요?
초기 로딩이 느리거나 Lighthouse 성능 점수가 낮거나, 큰 라이브러리가 페이지 전체에 실릴 때 중요해집니다.
Checklist
실제로 볼 때 확인할 것
- 01
정의보다 쓰이는 상황을 먼저 본다
- 02
관련 개념을 함께 확인한다
- 03
실제 프로젝트에서 등장한 위치를 기록한다