Webpack Bundle Analyzer로 Angular 번들 분석

Angular와 모든 최신 웹 애플리케이션에는 삶을 더 쉽게 만들어주는 종속성이 포함되어 있습니다. 대부분이 최적화되어 있지만 전혀 무료가 아닙니다. 우리가 추가하는 모든 의존성은 번들을 증가시킬 것입니다.

우리는 바퀴를 다시 발명하고 싶지는 않지만 번들에 더 많은 것을 추가하기 전에 먼저 물어봐야 할 것 같습니다.

이것이 바로 나에게 필요한 것입니까?

번들에 어떤 영향을 미칩니까?

고려해야 할 또 다른 중요한 사항은 코드를 더 잘 분할하고 성능을 향상시키기 위해 가능한 한 지연 로딩을 구현해야 한다는 것입니다. 자세한 내용은 this을 참조하십시오.

그래서, 이 게시물은 무엇에 관한 것입니까? 번들 내부에 무엇이 있는지 확인하는 도구인 webpack-bundle-analyzer를 검토할 것입니다. 모든 번들 콘텐츠의 대화형 트리맵 시각화를 생성합니다. 맵을 탐색하여 제거/최적화할 수 있는 항목을 식별할 수 있습니다.

설치 단계

 npm install --save-dev webpack-bundle-analyzer

 ng build --stats-json

 npx webpack-bundle-analyzer dist/your-project-name/stats.json  

dist/후에 프로젝트 이름을 설정해야 합니다. 지도에서 검토할 몇 가지 추가 종속성이 포함된 예제 프로젝트를 사용하고 있습니다. 실제 앱에서는 분석할 종속성과 모듈이 더 많을 것입니다.

마지막 명령줄을 실행하면 다음이 표시됩니다.


지도는 이렇게 생겼어요


이제 모멘트 js를 탐색해 보겠습니다. 보시다시피 모멘트는 작은 종속성이 아닙니다.


마지막으로 특정 모듈을 찾을 수 있습니다.


결론
webpack-bundle-analyzer는 매우 유용한 도구입니다.

프로젝트의 큰 그림 보기

작은 것으로 대체할 수 있는 종속성을 식별합니다

.

큰 모듈을 식별하고 더 작은 조각으로 분할

참조

webpack-bundle-analyzer