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

Houssein Djirdeh

npm과 같은 레지스트리는 누구나 50만 개가 넘는 공개 패키지를 다운로드하고 사용할 수 있도록 하여 JavaScript 세계를 한층 더 나은 방향으로 변화시켰습니다. 하지만 완전히 사용하지 않는 라이브러리를 포함하는 경우가 많습니다. 이 문제를 해결하려면 번들 분석을 통해 사용되지 않는 코드를 감지한 다음 사용되지 않는 라이브러리와 불필요한 라이브러리를 삭제합니다.

Core Web Vitals에 미치는 영향

사용하지 않는 코드를 삭제하면 웹사이트의 Core Web Vitals를 개선할 수 있습니다. 예를 들어 최대 콘텐츠 페인트는 불필요하게 큰 애셋이 다른 리소스와 대역폭을 놓고 경쟁할 때 사용되지 않는 코드의 영향을 받을 수 있습니다. 클라이언트에서만 마크업을 렌더링하는 대용량 JavaScript 애셋이 리소스가 로드될 때를 지연하여 LCP 후보에 대한 참조를 포함하는 경우에도 LCP가 영향을 받을 수 있습니다.

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

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

번들 분석

DevTools에서는 모든 네트워크 요청의 크기를 확인할 수 있습니다.

  1. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  2. 네트워크 탭을 클릭합니다.
  3. 캐시 사용 중지 체크박스를 선택합니다.
  4. 페이지를 새로고침합니다.
번들 요청이 포함된 Network 패널
JavaScript 파일의 크기를 보여주는 DevTools

DevTools의 Coverage 탭에는 애플리케이션에서 사용되지 않는 CSS 및 JS 코드의 양도 표시됩니다.

DevTools의 코드 적용 범위
범위 탭

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

Lighthouse 사용하지 않는 JavaScript 줄이기 보고서
사용되지 않는 JavaScript 보고서를 줄입니다.

webpack을 번들러로 사용하는 경우 Webpack Bundle Analyzer를 사용하여 번들을 구성하는 항목을 조사할 수 있습니다. 다른 플러그인과 마찬가지로 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을 사용하는 경우 주요 라이브러리에서 사용되지 않는 코드를 자동으로 삭제하는 플러그인 목록을 확인하세요.

불필요한 라이브러리 삭제

일부 라이브러리는 부분으로 분류하여 선택적으로 가져올 수 없습니다. 이러한 시나리오에서는 라이브러리를 완전히 삭제할 수 있는지 고려해 보세요. 맞춤 솔루션을 빌드하거나 더 가벼운 대안을 활용하는 것은 항상 고려해 볼 만한 옵션입니다. 그러나 앱에서 라이브러리를 완전히 삭제하기 전에 이러한 전략 중 하나에 필요한 복잡성과 노력을 고려하는 것이 중요합니다.