AFTER

01. 스크립트 병합 (Script Combination)

이 페이지는 똑같은 로직을 병합된 1개의 bundle.js로 요청합니다. Before와 비교해 요청 수가 20 → 1로 줄어든 것을 확인하세요.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.
Before (20개 분리) After (1개 번들)

아래 칩이 번들 안의 각 part 로직이 실행되며 하나씩 추가됩니다:

🔧 실제 구현 코드

<script src="/labs/01-script-combination/assets/bundle.js"></script>

20개 파일을 빌드 시점에 scripts/build-bundle.js가 단순 연결(concat)해 bundle.js 하나로 만들어 둡니다. 요청이 1개로 줄어 요청당 고정 오버헤드(헤더, 지연시간)가 20번이 아니라 1번만 발생합니다.

← 실습 목록으로 돌아가기