Angular Bundle이 부풀어 오른 이유

Angular 번들이 부풀어 오르는 일반적인 이유는 MomentJS 이 아닌 tree-shakable 과 같은 라이브러리를 사용하기 때문입니다.

이 블로그 게시물은 Angular 번들을 분석하는 방법과 애플리케이션을 부풀리는 라이브러리를 정확히 찾아내는 방법을 설명합니다.

Angular 번들을 분석해야 하는 이유

프로젝트 종속성을 주시하고 애플리케이션을 팽창시키는 종속성을 불러내는 것이 중요합니다. MomentJS가 얼마나 큰지 깨닫기 전까지는 내 프로젝트의 주요 요소였습니다.

다음 섹션에서는 내일 날짜를 표시하는 이demo application를 사용하여 MomentJS를 피하기 위해 어떻게 결론에 도달했는지 살펴보겠습니다.

Angular 번들을 분석하는 방법

Angular 번들을 분석하는 빠른 방법은 Angular와 함께 실행source-map-explorer할 수 있는 사용자 지정ngx-builders/analyze인 Angular CLI builder을 사용하는 것입니다. 이렇게 하면 애플리케이션이 번들로 묶인 방식과 애플리케이션을 부풀리는 종속성이 무엇인지 알 수 있습니다.

설치ngx-builders/analyze

ng add @ngx-builders/analyze

설치source-map-explorer

npm i -D source-map-explorer

npm 스크립트를 분석하도록 업데이트package.json:

{
"name": "[YOUR_PROJECT_NAME]",// Likely will be your project name, but doesn't have to be
"scripts": {
    "ng": "ng",
    // ...
    "analyze": "ng run [YOUR_PROJECT_NAME]:analyze",// You can find your project name in angular.json under the projects property
},
}

분석 npm 스크립트 실행

npm run analyze

애플리케이션 빌드가 표시되고 브라우저에서 source-map-explorer에서 제공한 결과가 열릴 것입니다.

MomentJS를 대체하는 이유

이demo는 3가지 방식으로 구현되었습니다.

사용 중 Native Date API

사용 중 MomentJS

사용 중 date-fns

테스트

이러한 각 솔루션은 동일한tests을 사용하여 구현이 예상된 동작을 달성하는지 확인합니다.

결과 비교

각 솔루션이 내 데모 쇼의 전체 번들에 미치는 영향을 분석하면 다음과 같습니다.


구현
총합 크기


기본 날짜 API
202KB

MomentJS
575.18KB

날짜 fns
222.65KB


Using Native Date API은 내 번들 크기에 가장 부정적인 영향을 미칩니다. 총 크기는 202KB입니다.



추가 라이브러리를 피함으로써 내 번들 크기를 부풀릴 위험이 없기 때문에 이는 의미가 있습니다. 유일한 단점은 구현이 기존 라이브러리를 사용하는 것보다 훨씬 오래 걸린다는 것입니다.

Using MomentJS이 내 번들 크기에 가장 큰 영향을 미칩니다. 총 크기는 575.18KB입니다. MomentJS를 사용하면 애플리케이션이 크게 부풀어 전체 번들 크기의 64.8%가 됩니다. 이것은 MomentJS가 아니기 때문에tree-shakable 사용되는 양에 관계없이 전체 라이브러리를 가져옵니다.



Using date-fns은 번들 크기를 20.79KB 늘립니다. 총 크기는 222.65KB이므로 전체 번들 크기의 9.3%가 됩니다. 이는 MomentJS 가져오기에 비해 크게 개선된 것입니다. 이것은 date-fns가 tree-shakable이기 때문입니다.

결론

Angular 애플리케이션에 라이브러리 추가를 고려할 때 ngx-builders 및 source-map-explorer과 같은 도구를 사용하면 라이브러리가 해당 애플리케이션의 번들 크기를 늘리지 않는지 확인할 수 있습니다.

모든 기능을 처음부터 구현하는 데 소요되는 시간에 따라 라이브러리 사용을 피할 수 있습니다. 하지만 바퀴를 재발명하는 데 시간을 덜 쓰고 싶다면 date-fns 과 같은 잘 알려진 라이브러리에 도달할 것입니다. 한 가지는 확실합니다. tree-shakable과 같은 라이브러리는 번들 크기를 불필요하게 증가시키므로 피하겠습니다.

간단히 말해서 MomentJS에 대한 MomentJS을 고려하십시오.

Bitovi의 더 많은 블로그 게시물을 읽고 싶으세요? alternatives에서 더 많은 게시물을 확인하세요.

Angular 애플리케이션을 분석하는 데 도움이 필요하십니까? Bitovi가 도와드리겠습니다! our blogs at Bitovi.com !