JavaScript 코드 커버리지 보고서는 관찰 기간에 어떤 코드가 실행되었는지 보여 줍니다. 초기 로딩에서 실행되지 않은 코드도 메뉴, 주문 과정이나 다른 경로에 필요할 수 있습니다. 보고서로 조사할 대상을 정한 뒤 번들을 변경하기 전에 관련 사용자 흐름을 확인하세요.
리소스와 검사 조건 확인하기
조사할 페이지에서 Milten JS Scanner를 실행하세요. URL, 날짜, 선택한 조건을 결과와 함께 저장합니다. 스캐너는 클릭이나 스크롤 없이 한 번의 페이지 로딩을 관찰합니다. 스크립트 로딩, 코드 커버리지, JavaScript 오류를 보고하지만 해당 파일이 사이트 전체에서 불필요하다고 입증하지는 못합니다.
파일의 로딩 데이터와 코드 실행 데이터를 비교하세요. 전송량이 많다는 것, 실행 시간이 길다는 것, 실행되지 않은 코드의 비율이 높다는 것은 서로 다른 관찰 결과입니다. 다운로드는 빨라도 실행 중 메인 스레드를 오래 점유할 수 있습니다. 로드되지 않은 파일에는 해당 검사에서 평가할 수 있는 실행 데이터가 없습니다.
주문 과정을 예로 살펴보기
app.js에 랜딩 페이지와 결제에 대한 코드가 모두 포함되어 있다고 가정해 보겠습니다. 랜딩 페이지가 열리면 결제 기능이 실행되지 않습니다. 이는 측정된 고객 결과가 아닌 교육 사례입니다.
리소스 URL과 페이지에서 해당 리소스를 불러오는 방식을 확인하세요. 주문 화면을 열고 메뉴를 사용하며 같은 번들을 공유하는 다른 페이지를 방문합니다. 테스트한 동작을 기록하세요. Chrome DevTools Coverage에서는 페이지를 조작하는 동안 기록을 계속할 수 있습니다. 이는 초기 로딩만 검사할 때보다 넓은 범위를 관찰합니다.
결제에 코드가 필요한 경우 코드를 제거하면 유용한 작업이 중단됩니다. 사용자가 결제 단계에 도달했을 때 해당 기능을 로드하는 것은 조사해 볼 가치가 있습니다. 결정은 애플리케이션과 다음 상호 작용에 미치는 영향에 따라 달라집니다.
사용 가능한 소스 맵 활용하기
소스 맵은 생성된 번들을 원본 모듈과 연결합니다. Milten의 모듈 보기에는 스캐너가 읽을 수 있는 유효하고 지원되는 형식의 소스 맵이 필요합니다. 맵이 없으면 보고서의 해당 부분은 불완전합니다. 리소스와 오류 정보는 문제를 좁히는 데 계속 활용할 수 있습니다.
사용할 수 있는 소스 맵이 없다면 리소스의 import 경로와 빌드 출력을 살펴보세요. 모듈 보기가 없다는 이유로 모든 코드가 실행되었다고 판단하면 안 됩니다. MDN 소스 맵 가이드는 생성된 코드와 원본 코드의 관계를 설명합니다.
한 가지 변경 후 관련 흐름 테스트하기
자주 쓰지 않는 기능을 분리하거나 필수가 아닌 외부 연동을 나중에 로드하는 등 근거가 확인된 개선 후보를 선택하세요. 비교하기 쉽도록 변경 범위를 작게 유지합니다. 필요한 기능이 동작하는지, 새로운 콘솔 오류가 없는지, 브라우저가 예상한 파일을 로드하는지 확인하세요.
Speed Scanner로 로딩 결과를 살펴보고 INP Scanner로 느린 상호작용을 조사하세요. 초기 로딩의 TBT와 긴 작업은 실제 방문에서 측정한 INP와 같은 지표가 아닙니다. 반복 탐색 후 객체가 쌓인다면 Memory Leaks를 사용해 보고된 경로를 재현하세요.
같은 조건에서 결과 비교하기
동일한 장치, 네트워크 및 캐시 조건에서 동일한 URL을 반복합니다. 보고서를 모두 보존하고 수동으로 테스트한 상호 작용을 기록하세요. 코드 변경 사항을 게시한 후 프로덕션 빌드를 확인합니다. 개발 번들은 다르게 동작할 수 있습니다.
실행되지 않은 모든 바이트를 제거할 수 있나요?
아니요. 결과는 관찰 기간을 대상으로 하며 애플리케이션의 모든 상태를 보여 주지는 않습니다. 코드를 제거하기 전에 관련 동작과 같은 번들을 사용하는 경로를 테스트하세요.
번들이 더 작을수록 더 빠른 페이지가 보장됩니까?
아니요, 로딩 순서, 서버 응답, 실행 및 후속 상호 작용도 중요합니다. 사용자 경험과 파일 크기를 비교하세요.
페이지의 JavaScript를 분석하세요. 로딩을 더 넓은 관점에서 살펴보려면 웹사이트 속도와 SEO를 읽어 보세요.
