빌드 시간이 자꾸 길어질 땐 병목부터 찾자

웹 프로젝트가 커질수록 빌드 시간이 증가한다. 특정 시점 이후로 갑자기 느려졌다면, 뭔가가 추가되거나 바뀐 걸 의심해봐야 한다.

빌드 시간 측정해보기

"느려졌다"는 느낌만으로는 원인을 찾을 수 없다. 정확히 재보자.

time npm run build

또는 빌드 도구 자체가 제공하는 분석 도구를 사용한다.

• Webpack: --profile --json 플래그로 분석 파일 생성
• Vite: --debug 플래그
• Next.js: ANALYZE=true next build

빌드 로그에서 각 단계 시간 읽기

Next.js 빌드 로그를 보면 보통 이런 식으로 나온다:

compiled client and server successfully
Route (pages)                              Size     First Load JS

각 페이지나 라우트별 크기를 본다. 특정 페이지가 비정상적으로 크면, 그 페이지의 의존성을 확인해야 한다.

의존성 추가가 빌드 시간에 영향을 주는가?

패키지를 최근에 추가했다면, 그게 빌드를 느리게 하는 범인일 수 있다.

npm ls --depth=0  # 최상위 의존성만 본다
npm run build     # 한 번 시간 측정

의심되는 패키지를 잠시 제거해봐서 빌드 시간이 개선되는지 확인해본다.

큰 파일이나 이미지가 포함됐나?

node_modules에 불필요한 파일이 많거나, src 폴더에 큰 미디어 파일이 있으면 빌드가 느려진다.

ls -lh src/
du -sh node_modules/

특히 node_modules 내 개별 패키지의 크기가 비정상적으로 크진 않은가?

빌드 설정 확인

번들러 설정을 실수로 바꿨을 수도 있다. .next/config.json 또는 webpack 설정을 확인한다.

• source map이 프로덕션 빌드에 포함됐나? (production 빌드에선 불필요)
• treeshaking이 제대로 동작하는가?
• minification 설정은?

로컬과 CI/CD 환경 비교

로컬에서는 빠른데 CI/CD에서 느리다면, 환경 차이가 있다.

• 머신 스펙 (CPU, 메모리)
• Node 버전
• 캐시 존재 여부

CI에서 npm install 때마다 모든 의존성을 새로 받으면 당연히 느리다. 의존성 캐시를 설정하자.

최후의 확인: 실제 배포 성능

빌드 시간이 줄었다면, 배포 후 실제 웹 성능도 개선되는지 확인한다. 번들 크기 감소가 곧 사용자 경험 개선으로 이어져야 의미가 있다.

npm run build
# 번들 분석 결과를 웹팩 분석 도구로 업로드