npm과 같은 레지스트리는 누구나 50만 개가 넘는 공개 패키지를 다운로드하고 사용할 수 있게 하여 JavaScript 환경을 개선해 왔습니다. 그러나 종종 완전히 사용하지 않는 라이브러리를 포함합니다. 이 문제를 해결하려면 번들을 분석하여 사용하지 않는 코드를 감지한 다음 사용되지 않는 라이브러리와 불필요한 라이브러리를 삭제합니다.
코어 웹 바이탈에 미치는 영향
사용하지 않는 코드를 삭제하면 웹사이트의 코어 웹 바이탈을 개선할 수 있습니다. 예를 들어 최대 콘텐츠 렌더링 시간은 불필요하게 큰 애셋이 다른 리소스와 대역폭을 두고 경쟁할 때 사용되지 않는 코드의 영향을 받을 수 있습니다. 클라이언트에서만 마크업을 렌더링하는 대용량 자바스크립트 애셋에 LCP 후보에 관한 참조가 포함되어 있으면 이러한 리소스가 로드될 때 지연이 발생하여 LCP가 영향을 받을 수도 있습니다.
사용하지 않는 JavaScript도 다운로드, 파싱, 컴파일한 후 실행해야 하므로 사용하지 않는 코드는 다음 페인트에 대한 상호작용 (INP)에도 영향을 줄 수 있습니다. 사용하지 않는 코드로 인해 페이지 응답성 저하를 유발하는 리소스 로드 시간, 메모리 사용량, 기본 스레드 활동에 불필요한 지연이 발생할 수 있습니다.
이 가이드에서는 프로젝트의 코드베이스에서 사용하지 않는 코드를 분석하는 방법을 설명하고 프로덕션의 사용자에게 제공하는 JavaScript 애셋에서 사용하지 않는 코드를 프루닝하는 전략을 제공합니다.
번들 분석
DevTools는 모든 네트워크 요청의 크기를 표시할 수 있습니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 캐시 사용 중지 체크박스를 선택합니다.
- 페이지를 새로고침합니다.
또한 DevTools의 범위 탭에서도 애플리케이션에서 사용되지 않는 CSS 및 JS 코드의 양을 확인할 수 있습니다.
Node CLI를 통해 전체 Lighthouse 구성을 지정하면 사용되지 않는 JavaScript 감소 감사를 실행하여 사용되지 않는 코드가 애플리케이션과 함께 제공되는 양을 추적할 수 있습니다.
webpack을 번들러로 사용하는 경우 Webpack 번들 분석기를 사용하여 번들을 구성하는 요소를 조사할 수 있습니다. 다른 플러그인과 마찬가지로 webpack 구성 파일에 플러그인을 포함합니다.
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
webpack은 일반적으로 단일 페이지 애플리케이션을 빌드하는 데 사용되지만 Parcel 및 Rollup과 같은 다른 번들러에도 번들을 분석하는 데 사용할 수 있는 시각화 도구가 있습니다.
이 플러그인이 포함된 상태로 애플리케이션을 새로고침하면 전체 번들의 확대/축소 가능한 트리맵이 표시됩니다.
이 시각화는 번들에서 다른 부분보다 큰 부분을 보여주므로 애플리케이션이 가져오는 라이브러리의 수와 크기를 더 잘 이해할 수 있습니다. 이를 통해 사용되지 않거나 불필요한 라이브러리를 사용 중인지 확인할 수 있습니다.
사용하지 않는 라이브러리 삭제
이전 트리맵 이미지에서는 단일 @firebase
도메인 내에 패키지가 꽤 많이 있습니다. 웹사이트에 Firebase 데이터베이스 구성요소만 필요한 경우 가져오기를 업데이트하여 해당 라이브러리를 가져옵니다.
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
아무 곳에서도 사용되지 않는다고 확신하는 미스터리한 패키지의 경우 한 걸음 물러서서 어떤 최상위 종속 항목에서 이 패키지를 사용하고 있는지 확인합니다. 거기에서 필요한 구성요소만 가져오는 방법을 찾아봅니다. 라이브러리를 사용하지 않는 경우 삭제합니다. 초기 페이지 로드에 라이브러리가 필요하지 않으면 지�� 로드를 사용하는 것이 좋습니다.
webpack을 사용하는 경우 인기 라이브러리에서 사용되지 않는 코드를 자동으로 삭제하는 플러그인 목록을 확인하세요.
불필요한 라이브러리 삭제
모든 라이브러리를 여러 부분으로 나누어 선택적으로 가져올 수 있는 것은 아닙니다. 이러한 시나리오에서는 라이브러리를 완전히 삭제할 수 있는지 고려하세요. 커스텀 솔루션을 빌드하거나 더 가벼운 대안을 활용하는 것은 항상 고려할 가치가 있는 옵션입니다. 그러나 앱에서 라이브러리를 완전히 삭제하기 전에 이러한 전략에 필요한 복잡성과 노력을 평가하는 것이 중요합니다.