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

npm을 사용하면 프로젝트에 코드를 쉽게 추가할 수 있습니다. 그런데 정말 그 여분의 바이트를 모두 사용하고 계신가요?

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

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

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

첫 입력 지연 (FID)다음 페인트에 대한 상호작용 (INP)과 같은 다른 측정항목도 사용되지 않는 코드의 영향을 받을 수 있습니다. 사용하지 않는 JavaScript도 다운로드, 파싱, 컴파일한 후 실행해야 하기 때문입니다. 미사용 코드로 인해 페이지 응답성 저하를 야기하는 리소스 로드 시간, 메모리 사용량, 기본 스레드 활동에 불필요한 지연이 발생할 수 있습니다.

이 가이드에서는 프로젝트의 코드베이스를 분석하는 방법을 보여줌으로써 프로젝트에서 사용되지 않는 코드를 처리하는 데 도움을 주고, 프로덕션 환경의 사용자에게 제공하는 JavaScript 애셋에서 사용하지 않는 코드를 프루닝하는 전략을 제공합니다.

번들 분석

DevTools를 사용하면 모든 네트워크 요청의 크기를 쉽게 확인할 수 있습니다.

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

번들 요청이 있는 네트워크 패널

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

DevTools의 코드 적용 범위

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

Lighthouse 미사용 JS 감사

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

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

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

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

Webpack 번들 분석 도구

이 시각화를 사용하면 번들에서 다른 부분보다 큰 부분을 검사하고 가져올 모든 라이브러리를 더 잘 파악할 수 있습니다. 이를 통해 사용되지 않거나 불필요한 라이브러리를 사용 중인지 확인할 수 있습니다.

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

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

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

대규모 애플리케이션의 경우에는 이 프로세스가 훨씬 더 복잡하다는 점을 강조하는 것이 중요합니다.

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

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

불필요한 라이브러리 삭제

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