Angular CLI 출력 - 번들 파일을 분석하는 방법

Angular CLI 출력 - 번들 파일을 분석하는 방법

CLI를 하여 Angular CLI를 하여 Angular 하여 을 을 는 를 는 --prod스위치를 바꾸다번들은 dist 디렉토리에 생성됩니다.트리 쉐이킹과 다른 모든 단계를 거친 후 실제로 어떤 클래스와 기능이 번들에 포함되었는지 알 수 있는 방법이 있습니까?

업데이트 2020:

Angular 팀은 번들 크기를 분석할 때 웹팩-번들-분석기 대신 소스-맵-익스플로러만 사용할 것을 강력하게 권장합니다.그들에 따르면, 웹팩-번들-분석기와 다른 몇몇 유사한 도구들은 Angular 빌드 프로세스와 관련된 실제 정보를 제공하지 않는다고 합니다.

자세한 내용은 web.dev - https://youtu.be/B-lipaiZII8?t=215 에서 확인하실 수 있습니다.

전역적으로 source-map-explorator를 설치하려면:-

npm i -g source-map-explorer

아니면

yarn global add source-map-explorer

번들 크기를 분석하는 방법 :-

source-map-explorer dist/my-awesome-project/main.js

. 을 해야 빌드하면 얻을 수 . 소스 맵은 다음과 같이 구축하면 얻을 수 있습니다.ng build --prod --sourceMap=true. 그러나 v12 이후로 플래그를 전달할 필요는 없습니다.

---

원래 답변:
webpack-bundle-analyzer를 사용하여 번들을 검사할 수 있습니다.

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

• 를 합니다.package.json scriptsh로 절을 "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

• npm run analyze

이 레포는 게으른 로딩을 구현하는 방법을 보여주는 단순한 각진 앱일 뿐이며 위와 같이 웹팩-번들-분석기가 이미 설정되어 있습니다.

번들 크기를 모니터링하도록 Angular CLI 예산을 구성할 수도 있습니다.

삭제:
@ngx-builders/분석을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

• ng add @ngx-builders/builders
• npm i source-map-g
• ngrun [YOUR_PROJECT_NAME]:분석

삭제:
nx 콘솔(일명 앵귤러 콘솔)을 사용하는 경우 번들 분석 기능이 내장되어 있습니다.stats.json@Klaster_1이 주석에 명시한 프로젝트마다 경로가 다를 수 있습니다.

2020 각팀 추천

Angular 팀에서는 웹팩-번들-분석기 대신에 번들 크기를 분석하는 데 소스-맵-익스플로러만 사용할 것을 강력하게 권장합니다.그들에 따르면, 웹팩-번들-분석기와 다른 몇몇 유사한 도구들은 각진 빌드 프로세스와 관련된 실제 정보를 제공하지 않는다고 합니다.

자세한 내용은 web.dev - https://youtu.be/B-lipaiZII8?t=215 에서 확인할 수 있습니다.

전역적으로 source-map-explorator를 설치하려면:-

npm i source-map-explorer

아니면

yarn global add source-map-explorer

번들 크기를 분석하는 방법 :-

source-map-explorer dist/my-awesome-project/main.js

맵을 사용할 수 해야 . (은 할 을 을 ng build --prod --source-map=true)

사이드 노트: 저는 개인적으로 웹팩-번들-분석기를 꽤 오랫동안 사용해왔습니다.하지만 이제부터는 소스-맵-익스플로러가 될 겁니다.

편집 [2020-06-08]

Angular Console의 이름이 Nx Console로 변경되었습니다.VSCode의 콘솔로 이동하면 statsJson 옵션을 사용하도록 설정한 상태에서 빌드 명령을 실행할 수 있습니다.TypeScript 구성에 따라 일부 stats-es*.json 파일을 컴파일된 내용과 함께 빌드 디렉토리에 생성합니다.웹팩-번들-분석기와 함께 사용할 수 있습니다(수용된 답변에 언급된 바와 같이).

npx webpack-bundle-analyzer ./pathto/stats-es2015.json

설정에 따라 Ecmascript 번호를 조정합니다.

오래된 대답

Angular 콘솔 7.4 이후로 Angular 번들을 분석하는 새로운 방법이 있습니다.

• Nrwl 기술로 vScode 확장 "Angular Console"을 설치합니다.
• 옵션:작업 공간을 nrwl-nx 작업 공간으로 전환할 수 없습니다.ng add @nrwl/schematics이는 확장 각도 작업 공간일 뿐이지만 기본 각도 작업 공간에서도 작동합니다.)
• 프로젝트로 이동 > 빌드할 앱을 선택하고 aot 및 production으로 빌드 명령을 실행합니다.

그리고 이것이 마지막입니다.출력은 다음과 같습니다.번들 크기와 번들의 모든 부분이 포함되어 있습니다.분석하고자 하는 파일(main/polyfills/1/etc)을 선택할 수 있습니다.각 파일에 대한 파이가 표시됩니다.꽤 상세하고 사용하기 쉽습니다.

아래 단계에 따라 각도 앱에 웹팩 코드 분석기를 추가합니다.

    - cd into your angular app
    > npm install --save-dev webpack-bundle-analyzer
    - Add below lines to script block of package.json
      "build:stats": "ng build --stats-json",
      "analyze": "webpack-bundle-analyzer dist/<your-project>/stats.json" ,
      "build-analyze": "npm run build:stats && npm run analyze",
    > npm run build-analyze

언급URL : https://stackoverflow.com/questions/46567781/angular-cli-output-how-to-analyze-bundle-files