외부 라이브러리: 외부 라이브러리의 숨겨진 무게-JS 튜토리얼-php.cn

External libraries: The Hidden Weight of External Libraries

개발자로서 우리는 시간을 절약하고, 잘 테스트된 솔루션을 활용하고, 프로젝트의 더 큰 그림에 집중하기 위해 외부 후크 라이브러리에 의존하는 경우가 많습니다. 그러나 이러한 라이브러리가 앱 성능과 로딩 속도의 핵심 요소인 번들 크기에 미치는 영향을 고려하는 것이 중요합니다. 이러한 라이브러리가 번들 크기에 어떤 영향을 미치는지, 트리 쉐이킹이 지원되는지 확인하는 방법, 정보를 바탕으로 결정을 내리는 방법을 살펴보겠습니다.

번들 크기가 중요한 이유

사용자 경험: 번들이 클수록 다운로드, 구문 분석 및 실행하는 데 시간이 더 오래 걸립니다. 특히 느린 네트워크나 장치에서는 더욱 그렇습니다.
SEO 및 성능 점수: Google Lighthouse와 같은 도구는 무거운 번들에 불이익을 주어 검색 순위에 영향을 미칩니다.
장기 유지 관리: 번들이 커지면 프로젝트가 성장함에 따라 성능 병목 현상을 모호하게 할 수 있습니다.

외부 후크 라이브러리: 편의성 대 비용

후크 라이브러리는 복잡한 상태 또는 재사용 가능한 패턴을 처리하기 위한 일반적인 솔루션이지만 번들 비용은 구조에 따라 다릅니다.

입상형(모듈형)

필요한 후크만 설치하고 종속성을 최소화하세요.
예:

  import { useDebounce } from "hook-lib/useDebounce";

로그인 후 복사

모놀리식(트리-쉐이크 가능)

라이브러리 하나를 설치하되 빌드 도구가 사용하지 않는 내보내기를 제거하는지 확인하세요.
예:

  import { useDebounce } from "hook-lib";

로그인 후 복사

각 접근 방식에는 장단점이 있습니다. 세분화된 라이브러리는 추가되는 항목을 정밀하게 제어할 수 있는 반면, 모놀리식 라이브러리는 관리하기 쉽지만 부풀림을 방지하려면 적절한 트리 쉐이킹이 필요합니다.

후크 라이브러리는 얼마나 많은 무게를 추가합니까?

무게는 다음에 따라 달라집니다.

라이브러리 크기: 일부 라이브러리는 가볍지만(몇 KB) 종속성에 의존하는 경우 다른 라이브러리는 수십 KB까지 늘어날 수 있습니다.
트리 쉐이킹 효율성: 라이브러리가 트리 쉐이킹을 지원하지 않는 경우 사용하지 않는 코드를 가져올 수 있습니다.
사용법: 단일 후크를 가져오면 공유 유틸리티나 폴리필을 가져와 크기가 커질 수 있습니다.

예시 시나리오:

경량 라이브러리(use-fetch-hook)로 5KB가 추가됩니다.
트리 쉐이킹이 좋지 않은 대규모 모놀리식 라이브러리는 후크를 하나만 사용하더라도 30KB를 추가할 수 있습니다.

라이브러리가 트리 쉐이킹을 지원하는지 확인하는 방법

라이브러리가 트리 쉐이킹을 지원하는지 확인하려면 코드 구조와 번들 방식을 이해하는 데 기반을 둔 여러 접근 방식을 따를 수 있습니다. 트리 셰이킹은 Webpack 및 Rollup과 같은 최신 JavaScript 번들러에서 지원되는 기능으로, 빌드 프로세스 중에 사용되지 않는 코드를 제거합니다. 도서관이 이를 지원하는지 확인하는 방법은 다음과 같습니다.

1. 도서관의 패키지 문서를 확인하세요

ES 모듈(ESM) 지원 찾기: 트리 쉐이킹이 작동하려면 라이브러리가 ES 모듈(ESM)을 사용해야 합니다. ESM을 사용하면 번들러가 가져오기/내보내기 구조를 분석하고 사용되지 않는 코드를 안전하게 제거할 수 있습니다.
- 라이브러리가 ESM 빌드를 제공하는지 확인하세요(종종 package.json의 모듈 또는 내보내기 필드에 지정됨).
- 문서나 저장소를 검색하여 ESM이 선호되는 사용법으로 언급되어 있는지 확인하세요.

2. 라이브러리의 package.json을 확인하세요.

내보내기 필드: 최신 패키지의 경우 내보내기 필드가 사용되는지 확인하세요. 이를 통해 다양한 환경(예: CommonJS 또는 ESM)에 대해 다양한 진입점을 지정할 수 있어 트리 쉐이킹 지원이 향상됩니다.
모듈 필드: 라이브러리의 package.json 파일을 살펴보세요. ESM 빌드를 가리키는 모듈 필드가 포함되어 있으면 라이브러리가 트리 쉐이킹과 호환된다는 것을 나타냅니다. 예:

  import { useDebounce } from "hook-lib/useDebounce";

로그인 후 복사

모듈은 트리 셰이크가 가능한 ESM 버전을 가리킵니다.
main은 일반적으로 트리 쉐이킹에 적합하지 않은 CommonJS 버전을 가리킵니다.

3.라이브러리 소스코드 확인

가져오기/내보내기 사용: 라이브러리가 ES 모듈 구문(예: 가져오기 및 내보내기)을 사용하는지 확인하세요. 트리 쉐이킹은 이 구문에서 가장 잘 작동합니다.
- 라이브러리가 CommonJS(require, module.exports)를 사용하는 경우 트리 쉐이킹이 그다지 효과적이지 않습니다.
부작용 없음: 트리 쉐이킹을 지원하는 라이브러리는 일반적으로 코드의 부작용을 방지합니다. 함수나 모듈을 가져올 때 작업을 수행하지 않는지 확인하려면 라이브러리의 소스 코드를 확인하세요. 예를 들어, 모듈을 가져오더라도 전역 상태가 변경되어서는 안 됩니다.

4. 번들러를 사용하여 트리 쉐이킹 테스트

최신 JavaScript 번들러(예: Webpack 또는 Rollup)를 사용하여 트리 쉐이킹이 작동하는지 테스트할 수 있습니다. 간단한 테스트는 다음과 같습니다.
- 라이브러리가 설치된 최소한의 프로젝트를 생성합니다.
- 코드에서 라이브러리의 일부(예: 단일 함수)만 가져옵니다.
- 번들러를 실행하고 출력을 확인하세요.
- a) 사용되지 않은 코드가 최종 번들에서 제외되면 라이브러리는 트리 쉐이킹을 지원합니다.
- b) 사용되지 않은 코드가 여전히 포함되어 있으면 라이브러리가 트리 쉐이킹을 지원하지 않거나 추가 구성이 필요합니다(예: 특정 코드를 부작용이 없는 코드로 표시).

5. 번들 분석기 사용

Webpack Bundle Analyser 또는 Rollup의 내장 분석기와 같은 도구를 사용하여 최종 번들을 시각화하세요.

출력에서 라이브러리의 크기를 찾아보세요. 트리 쉐이킹이 작동한다면 사용하지 않는 코드는 제외하고 최종 크기는 더 작아야 합니다.

6. 커뮤니티 및 이슈 확인

라이브러리 저장소(예: GitHub)의 문제나 토론을 살펴보고 트리 쉐이킹이나 이와 관련된 문제에 대한 언급이 있는지 확인하세요. 관리자는 트리 쉐이킹 활성화에 대한 지침을 제공할 수도 있습니다.

7. 특정 빌드 지침을 찾으세요.

일부 라이브러리에는 특히 기본적으로 완전히 트리 셰이크가 가능하지 않은 경우 트리 셰이크를 활성화하기 위한 특정 지침이 있을 수 있습니다. 최적의 트리 쉐이킹을 위해 번들러를 구성하는 방법에 대한 지침을 확인하세요.

예:

Lodash와 같은 라이브러리를 사용하는 경우 특정 "모듈식" 가져오기가 있습니다.

  import { useDebounce } from "hook-lib/useDebounce";

로그인 후 복사

이를 통해 전체 코드베이스를 포함하고 트리 흔들림을 방지하는 전체 라이브러리를 가져오는('lodash'에서 _ 가져오기) 대신 Lodash의 모듈식 가져오기를 사용할 때 Webpack과 같은 번들러가 사용하지 않는 메소드를 제거할 수 있습니다.

위 내용은 외부 라이브러리: 외부 라이브러리의 숨겨진 무게의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!