이 페이지는 Cloud Translation API를 통해 번역되었습니다.

사용하지 않는 코드 삭제하기

Houssein Djirdeh

npm과 같은 레지스트리는 누구나 50만 개가 넘는 공개 패키지를 다운로드하고 사용할 수 있게 하여 JavaScript 환경을 개선해 왔습니다. 그러나 종종 완전히 사용하지 않는 라이브러리를 포함합니다. 이 문제를 해결하려면 번들을 분석하여 사용하지 않는 코드를 감지한 다음 사용되지 않는 라이브러리와 불필요한 라이브러리를 삭제합니다.

코어 웹 바이탈에 미치는 영향

사용하지 않는 코드를 삭제하면 웹사이트의 코어 웹 바이탈을 개선할 수 있습니다. 예를 들어 최대 콘텐츠 렌더링 시간은 불필요하게 큰 애셋이 다른 리소스와 대역폭을 두고 경쟁할 때 사용되지 않는 코드의 영향을 받을 수 있습니다. 클라이언트에서만 마크업을 렌더링하는 대용량 자바스크립트 애셋에 LCP 후보에 관한 참조가 포함되어 있으면 이러한 리소스가 로드될 때 지연이 발생하여 LCP가 영향을 받을 수도 있습니다.

사용하지 않는 JavaScript도 다운로드, 파싱, 컴파일한 후 실행해야 하므로 사용하지 않는 코드는 다음 페인트에 대한 상호작용 (INP)에도 영향을 줄 수 있습니다. 사용하지 않는 코드로 인해 페이지 응답성 저하를 유발하는 리소스 로드 시간, 메모리 사용량, 기본 스레드 활동에 불필요한 지연이 발생할 수 있습니다.

이 가이드에서는 프로젝트의 코드베이스에서 사용하지 않는 코드를 분석하는 방법을 설명하고 프로덕션의 사용자에게 제공하는 JavaScript 애셋에서 사용하지 않는 코드를 프루닝하는 전략을 제공합니다.

번들 분석

DevTools는 모든 네트워크 요청의 크기를 표시할 수 있습니다.

`Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
네트워크 탭을 클릭합니다.
캐시 사용 중지 체크박스를 선택합니다.
페이지를 새로고침합니다.

번들 요청이 있는 네트워크 패널 — JavaScript 파일 크기를 보여주는 DevTools

또한 DevTools의 범위 탭에서도 애플리케이션에서 사용되지 않는 CSS 및 JS 코드의 양을 확인할 수 있습니다.

Node CLI를 통해 전체 Lighthouse 구성을 지정하면 사용되지 않는 JavaScript 감소 감사를 실행하여 사용되지 않는 코드가 애플리케이션과 함께 제공되는 양을 추적할 수 있습니다.

Lighthouse 미사용 JavaScript 보고서 감소 — 사용되지 않는 자바스크립트 보고서 줄이기

webpack을 번들러로 사용하는 경우 Webpack 번들 분석기를 사용하여 번들을 구성하는 요소를 조사할 수 있습니다. 다른 플러그인과 마찬가지로 webpack 구성 파일에 플러그인을 포함합니다.

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

webpack은 일반적으로 단일 페이지 애플리케이션을 빌드하는 데 사용되지만 Parcel 및 Rollup과 같은 다른 번들러에도 번들을 분석하는 데 사용할 수 있는 시각화 도구가 있습니다.

이 플러그인이 포함된 상태로 애플리케이션을 새로고침하면 전체 번들의 확대/축소 가능한 트리맵이 표시됩니다.

Webpack 번들 분석 도구 — Webpack 번들 분석기의 트리맵 뷰

이 시각화는 번들에서 다른 부분보다 큰 부분을 보여주므로 애플리케이션이 가져오는 라이브러리의 수와 크기를 더 잘 이해할 수 있습니다. 이를 통해 사용되지 않거나 불필요한 라이브러리를 사용 중인지 확인할 수 있습니다.

사용하지 않는 라이브러리 삭제

이전 트리맵 이미지에서는 단일 @firebase 도메인 내에 패키지가 꽤 많이 있습니다. 웹사이트에 Firebase 데이터베이스 구성요소만 필요한 경우 가져오기를 업데이트하여 해당 라이브러리를 가져옵니다.

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

아무 곳에서도 사용되지 않는다고 확신하는 미스터리한 패키지의 경우 한 걸음 물러서서 어떤 최상위 종속 항목에서 이 패키지를 사용하고 있는지 확인합니다. 거기에서 필요한 구성요소만 가져오는 방법을 찾아봅니다. 라이브러리를 사용하지 않는 경우 삭제합니다. 초기 페이지 로드에 라이브러리가 필요하지 않으면 지연 로드를 사용하는 것이 좋습니다.

webpack을 사용하는 경우 인기 라이브러리에서 사용되지 않는 코드를 자동으로 삭제하는 플러그인 목록을 확인하세요.

불필요한 라이브러리 삭제

모든 라이브러리를 여러 부분으로 나누어 선택적으로 가져올 수 있는 것은 아닙니다. 이러한 시나리오에서는 라이브러리를 완전히 삭제할 수 있는지 고려하세요. 커스텀 솔루션을 빌드하거나 더 가벼운 대안을 활용하는 것은 항상 고려할 가치가 있는 옵션입니다. 그러나 앱에서 라이브러리를 완전히 삭제하기 전에 이러한 전략에 필요한 복잡성과 노력을 평가하는 것이 중요합니다.