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

Houssein Djirdeh

npm과 같은 레지스트리에는 자바스크립트 세상을 더 좋게 변화시켰습니다. 50만 개가 넘는 공개 패키지를 다운로드하고 사용합니다. 그러나 일반적으로 있습니다. 이 문제를 해결하려면 번들을 분석하세요. 사용하지 않는 코드를 감지한 다음 미사용 및 불필요한 라이브러리를 삭제합니다.

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

사용하지 않는 코드를 삭제하면 웹사이트의 Core Web Vitals를 참조하세요. 최대 콘텐츠 페인트, 예를 들어 불필요하게 큰 애셋이 필요한 경우 사용되지 않는 코드의 영향을 받을 수 있습니다. 다른 리소스와 대역폭을 놓고 경쟁하게 됩니다. LCP는 메모리 크기가 크면 클라이언트에서만 마크업을 렌더링하는 자바스크립트 애셋 LCP 후보에 대한 참조를 포함함 로드할 수 있는 시점을 지연시켜 이를 완화합니다.

사용하지 않는 코드는 Interaction to Next Paint (INP)에도 영향을 줄 수 있습니다. 사용하지 않는 JavaScript도 다운로드, 파싱, 컴파일한 다음 실행됩니다 사용하지 않는 코드는 리소스 로드에 불필요한 지연을 야기할 수 있습니다. 시간, 메모리 사용량, 기본 스레드 활동 등 페이지 품질이 저하되는 문제를 초래하는 경우 있습니다.

이 가이드에서는 사용되지 않는 코드가 있는지 프로젝트의 코드베이스를 분석하는 방법을 설명합니다. 전달하려는 JavaScript 애셋에서 사용되지 않은 코드를 가지치기 위한 전략을 제공합니다. 사용자 환경을 개선할 수 있습니다

번들 분석

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

  1. `Control+Shift+J` (Mac에서는 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  2. 네트워크 탭을 클릭합니다.
  3. 캐시 사용 중지 체크박스를 선택합니다.
  4. 페이지를 새로고침합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">번들 요청이 있는 네트워크 패널</ph>
JavaScript 파일의 크기를 보여주는 DevTools

범위 탭 DevTools는 애플리케이션에서 사용되지 않은 CSS 및 JS 코드가 얼마나 많은지도 알려줍니다.

<ph type="x-smartling-placeholder">
</ph> DevTools의 코드 적용 범위
범위 탭

노드 CLI를 통해 전체 Lighthouse 구성을 지정하면 사용하지 않는 자바스크립트 감소 감사를 통해 사용되지 않은 코드가 얼마나 많이 전달되었는지 추적 애플리케이션/

<ph type="x-smartling-placeholder">
</ph> Lighthouse의 사용되지 않는 자바스크립트 줄이기 보고서
사용하지 않는 자바스크립트 보고서 줄이기

webpack을 번들러로 사용하는 경우 Webpack 번들 분석 도구 번들을 구성하는 요소를 조사하는 데 도움이 됩니다. 다음과 같이 webpack 구성 파일을 압축합니다.

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

webpack은 일반적으로 단일 페이지 애플리케이션을 빌드하는 데 사용되지만, 다른 번들러(예: Parcel 및 Rollup에는 Google Cloud에서 제공하는 확인할 수 있습니다

이 플러그인이 포함된 상태에서 애플리케이션을 새로고침하면 확대/축소 가능한 전체 번들에 적용됩니다

<ph type="x-smartling-placeholder">
</ph> Webpack 번들 분석기
Webpack 번들 분석기의 트리맵 보기

이 시각화는 번들에서 더 큰 부분을 보여줍니다. 이를 통해 라이브러리의 수와 크기를 더 잘 이해할 수 있습니다. 가져올 수 있습니다 이렇게 하면 미사용 코드를 라이브러리를 생성할 수 있습니다.

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

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

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

확신할 수 있지만 사용 중이 아닌 신비로운 패키지의 경우 한 걸음 물러서서 최상위 종속 항목 중에서 사용할 수 있습니다. 필요한 구성요소만 가져올 방법을 찾아보세요. 라이브러리를 사용하지 않는 경우 삭제합니다. 라이브러리가 지연 로드를 사용해 보세요. 있습니다.

webpack을 사용하는 경우 자동으로 실행되는 플러그인 목록을 확인하세요. 많이 사용되는 라이브러리에서 사용되지 않는 코드 삭제에 대해 자세히 알아보세요.

불필요한 라이브러리 삭제

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