빌드 시간이 갑자기 길어지면 어디서부터 확인할까

빌드 시간이 갑자기 길어지면 당황해서 무조건 최적화를 시도하게 된다. 그런데 실제로는 설정 한두 줄이나 의존성 하나가 시간을 낭비하는 경우가 대부분이다.

가장 중요한 건 문제를 제대로 찾는 것이다. 빌드 로그를 읽고, 어느 단계가 느린지 파악한 다음, 그 부분만 집중해서 손 봐야 한다.

먼저 빌드 시간을 측정한다

막연하게 "느려졌다"는 건 도움이 안 된다. 정확한 시간을 재야 한다.

time npm run build

이 명령을 몇 번 반복해서 일관된 결과인지 확인한다. 가끔 느린 것과 항상 느린 것은 다르다.

어디가 느린지 구간별로 확인한다

다음 타입스크립트 검사 단계를 시간과 함께 본다.

TYPESCRIPT_COMPILER_TIMING=1 npm run build 2>&1 | tee build.log

로그에서 각 단계의 시간을 확인한다. 번들링인지, 타입 체크인지, 이미지 최적화인지.

최근에 뭐를 바꿨는지 생각해본다

빌드가 느려진 시점을 돌이켜 본다. 보통 원인은 최근 변경사항 중 하나다:

• 의존성 추가 (새로운 라이브러리)
• 타입스크립트 설정 변경
• 빌드 설정 수정
• 페이지나 컴포넌트 대량 추가
• 이미지 파일 추가

의존성 크기를 확인한다

ls -lh node_modules/ | sort -k5 -h | tail -20

혹은 더 자세히:

npm ls --depth=0

최근에 추가한 패키지가 이상하게 크지는 않은지 본다.

로컬 캐시를 지우고 다시 빌드한다

캐시가 오래되면 타입스크립트 컴파일러가 제대로 일하지 못할 수 있다.

rm -rf .next
rm -rf dist
npm run build

새로 빌드했을 때 시간이 달라지면 캐시 관련 문제일 수 있다.

필요 없는 파일을 빌드 대상에서 제외한다

tsconfig.json의 exclude를 확인한다:

{
  "exclude": [
    "node_modules",
    ".next",
    "dist",
    "**/*.test.ts"
  ]
}

test 파일이나 임시 파일까지 빌드하고 있지는 않은지 확인한다.

점진적 빌드를 켠다

Next.js 프로젝트면 next.config.js에서:

const nextConfig = {
  swcMinify: true,
  experimental: {
    esmExternals: true,
  },
}

SWC 미니파이를 활성화하면 보통 빌드 시간이 줄어든다.

결론

빌드가 느려졌다면 먼저 "어디가" 느린지 찾아야 한다. 그 다음에 그 부분만 수정하는 게 가장 효율적이다. 무작정 라이브러리를 지우거나 설정을 다시 쓰기보다, 원인을 찾고 그 부분을 집중 공략하면 된다.