[최적화] : 분석 툴 소개 및 기본내용

분석 툴 소개

크롬 개발자 도구

크롬 개발자 도구는 웹 개발자들이 웹 페이지의 성능을 분석하고 개선하기 위한 도구입니다. 이 도구는 다양한 기능을 제공하여 개발자들이 웹 페이지의 성능을 개선하고 디버깅할 수 있도록 도와줍니다.

Network 패널

웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줍니다. 이를 통해 어떤 리소스가 어느 시점에 로드되는지, 해당 리소스의 크기 등을 확인할 수 있습니다.

Performance 패널

웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다. Network 패널에서 봤던 리소스가 로드되는 타이밍뿐만 아니라, 브라우저의 메인 스레드에서 실행되는 자바스키립트를 차트 형태로 볼 수 있어 이 패널을 통해 어떤 자바스크립트 코드가 느린지 확인할 수 있습니다.

Lighthouse 패널

웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다. 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 분석하고 최적화해야 하는지 알 수 있습니다.

webpack-bundle-analyzer

직접 설치해야 하는 툴로 webpack을 통해 번들링된 파일이 어떤 코드, 어떤 라이브러리를 담고 있는지 보여줍니다. 최종적으로 완성된 번들 파일 중 불필요한 코드가 어떤 코드이고 얼만큼의 비중을 차지하고 있는지 확인할 수 있습니다.