Gatsby 빌드 캐시가 실제로 줄이는 것

Gatsby의 빌드 캐시는 페이지와 데이터가 바뀌지 않았을 때 GraphQL 쿼리 평가, 이미지 처리, 번들 컴파일을 재사용해 두 번째 이후 빌드 시간을 줄인다.

빌드 시간이 가는 세 곳

정적 사이트 빌드에서 시간을 먹는 부분은 대체로 세 곳이다.

단계	하는 일	캐시 효과
GraphQL	콘텐츠를 읽어 페이지 데이터로 만든다	쿼리 결과 재사용
이미지	sharp로 크기·포맷별 변환을 만든다	변환 결과 재사용
번들	JS/CSS를 컴파일한다	webpack 캐시 재사용

이미지가 많은 블로그라면 이미지 단계가 가장 무겁다. 이 블로그처럼 커버 이미지가 글마다 있는 구조에서는 sharp의 캐시가 빌드 시간을 좌우한다.

캐시를 살리는 설정

• .cache와 public을 빌드 간에 보존한다. Netlify는 기본으로 이를 캐시한다.
• 새 의존성 설치나 플러그인 설정 변경은 캐시를 무효화한다 — 이건 버그가 아니라 정상이다.
• 캐시가 의심스러울 때는 gatsby clean으로 로컬을 비우고, Netlify에서는 "Clear cache and retry deploy"를 쓴다.

측정하는 법

빌드 시간은 로그에서 읽는다. Netlify 빌드 로그는 각 단계의 시간을 보여주고, Gatsby의 빌드 출력도 단계별 시간을 출력한다. 두 번 연속 빌드해 두 번째 시간을 보면 캐시 효과를 바로 볼 수 있다. 이 블로그의 실제 빌드 시간은 첫 배포 후 로그로 확인해 갱신한다.