중복된 JavaScript

Connor Clark
Connor Clark

게시일: 2025년 10월 8일

번들에서 큰 중복 자바스크립트 모듈을 삭제하여 네트워크 활동이 소비하는 불필요한 바이트 수를 줄입니다.

이 통계를 전달하는 방법

  • JavaScript 번들이 여러 개인 페이지의 경우 코드는 여러 번들에 필요한 대규모 종속 항목을 공통 번들로 분할합니다.
  • 개별 JavaScript 번들 내에서 대규모 종속 항목의 버전이 하나만 있는지 확인합니다.

View Treemap를 클릭하여 페이지의 JavaScript 번들을 자세히 살펴볼 수 있습니다. 그러면 Lighthouse Treemap에 페이지의 번들이 열립니다.

Lighthouse 트리맵입니다. 색상이 지정된 노드는 여러 JavaScript 번들에서 발견된 중복 모듈을 나타냅니다.
Lighthouse 트리맵입니다. 색상이 지정된 노드는 여러 JavaScript 번들에서 발견된 중복 모듈을 나타냅니다.
  • PageSpeed Insights 및 Lighthouse 보고서에서 이 버튼은 측정항목 아래의 성능 카테고리에 있습니다.

    Lighthouse 보기 트리맵 버튼
    Lighthouse '트리맵 보기' 버튼
  • DevTools 성능 패널에서 이 버튼은 중복된 JavaScript 통계에 있습니다.

    DevTools 성능 패널 뷰 트리를 보여주는 버튼
    DevTools 성능 패널 '트리맵 보기' 버튼

스택별 안내

공통된 대규모 종속 항목의 추가 진입점을 만들고 다음 항목에 JavaScript 번들러의 코드 분할 기능을 사용 설정합니다.

추가 자료