개발환경과 배포환경에서 lighthouse 점수 차이가 많이 나는 이유가 무엇인가요?

Question

개발-50점대 배포-90점대 이렇게 성능에서 40점 정도가 차이나던데 배포하면 압축이 돼서 그런건지.. 정확히 어떤 이유 때문인지를 모르겠네요. 이유 아시는 분 계실까요?

정종윤 · Accepted Answer

일반적으로 개발 환경에서는 디버깅을 쉽게 할 수 있도록 여러가지 추가적인 리소스를 요청하는데 이것이 lighthouse 점수에 계산되기 때문입니다.

여기에서 말하는 리소스라는 것은 개발 과정에서 발생한 오류를 추적할 수 있는 로그 같은 로직적인 부분일 수도 있고, 디버깅 시 정확한 코드 위치를 판단할 수 있는 소스맵 같은 파일일 수도 있습니다. 프로덕션 빌드를 할 때는 이와 같은 파일들을 사용자에게 제공할 필요가 없고 성능의 최적화를 하도록 요런 리소스들이 모두 빠지게 되어서 성능 상 이점을 누릴 수 있을 것입니다.

따라서 lighthouse 점수를 계산해야 한다면, 최종 사용자 입장에서 볼 수 있는 프로덕션 환경에서 체크하는 것이 더 적절합니다!

백승훈 · Answer

개발 환경 (npm start dev) 와 실 배포 환경에서는 차이가 발생된다면 실 배포 환경을 중심으로 수정하시면 됩니다. (압축일 수도 있고 캐시일 수도 있고 여러가지 원인이 있을 수 있습니다.)

상세 항목 열어보시면 어떤 항목에서 - 인지 어떤 항목에서 점수가 낮은지 전부 표시되는 것으로 알고 있습니다. 개발 환경에서 해당 탭을 열어 확인해보시면 될 것 같아요