테마 빌드가 느려졌을 때 확인하는 순서

테마 빌드 시간이 늘어나는 건 여러 곳에서 비롯될 수 있다. CSS가 많아졌거나, 테마 변수를 변환하는 로직이 무거워졌거나, 번들 크기 자체가 커졌을 수도 있다. 무엇부터 확인해야 할까.

먼저 사용자에게 실제 영향을 미치는지 본다. 빌드 시간이 늘었어도, 최종 번들 크기는 같을 수도 있다. 또는 특정 환경(개발/프로덕션)에서만 느릴 수도 있다.

빌드 결과 확인

npm run build

빌드 로그에서 시간이 오래 걸리는 단계를 본다. 소스 변환(compile) 단계인가, 번들링 단계인가, 아니면 최종 최적화 단계인가. 각 단계마다 걸리는 시간이 나온다면 그걸 기준으로 다음 확인을 할 수 있다.

정상 상태와 비교

테마 변경 전의 빌드 시간과 지금의 빌드 시간을 비교한다. 스크린샷이나 텍스트로 남겨두면 나중에 더 최적화가 필요한지 판단할 때 도움이 된다. 단순히 "느렸다"는 인상보다는 "5초 더 오래 걸렸다" 같은 구체적인 수치가 중요하다.

환경 차이 확인

로컬 환경과 배포 환경에서 빌드 시간이 얼마나 다른지 본다. 로컬에서는 괜찮지만 CI 파이프라인에서 느린 걸 수도 있다. 그렇다면 배포 서버의 리소스를 확인하거나, 캐시 설정을 살펴봐야 한다.

단계적으로 수정

CSS 파일 한두 개, 테마 변수 몇 개 등 작은 단위로 수정한다. 각 수정 후에 빌드 시간이 얼마나 개선되는지 확인한다. 이런 식으로 하면 결과가 바뀐 이유를 명확히 알 수 있고, 다음 번에 성능 문제가 나올 때도 빨리 찾을 수 있다.