Вывод Angular CLI — как анализировать файлы пакетов

ОБНОВЛЕНИЕ 2020:

Команда angular настоятельно рекомендует использовать для анализа размера пакета только source-map-explorer вместо webpack-bundle-analyzer. По их словам, webpack-bundle-analyzer и несколько других подобных инструментов не дают фактической информации о процессе сборки angular.

Дополнительную информацию можно найти на web.dev — https://youtu.be/B-lipaiZII8?t=215

Чтобы установить source-map-explorer глобально:

npm i -g source-map-explorer

or

yarn global add source-map-explorer

Чтобы проанализировать размер пакета: -

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

Не забудьте подготовить исходные карты: их можно получить, построив с помощью ng build --prod --sourceMap=true

ИСХОДНЫЙ ОТВЕТ:
Вы можете использовать webpack-bundle- Analyzer для проверки ваших пакетов.

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

• измените свой раздел package.json scripts с помощью "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

• npm run analyze

Вы можете проверить этот репозиторий. Это простое угловое приложение, которое демонстрирует, как реализовать отложенная загрузка, и у него уже настроен webpack-bundle-analyzer, как указано выше.

Также вы можете настроить Angular CLI бюджеты для отслеживания размера пакетов.

ОБНОВЛЕНИЕ:
Также с помощью @ngx-builders/analyze вы можете делать:

• нг добавить @ngx-builders/анализ
• npm я исходная карта-исследовать -g
• запустить [YOUR_PROJECT_NAME]:анализировать

ОБНОВЛЕНИЕ:
В случае, если вы используете консоль nx (она же консоль angular) теперь имеет функцию анализа пакетов встроенный также имейте в виду, что stats.jsonpath может отличаться для каждого проекта, указанного @Klaster_1 в комментариях.

Рекомендация команды angular на 2020 год

Команда angular настоятельно рекомендует использовать для анализа размера пакета только source-map-explorer вместо webpack-bundle-analyzer. По их словам, webpack-bundle-analyzer и несколько других подобных инструментов не дают фактической информации о процессе сборки angular.

Дополнительную информацию можно найти на web.dev — https://youtu.be/B-lipaiZII8?t=215

Чтобы установить source-map-explorer глобально:

npm i source-map-explorer

or

yarn global add source-map-explorer

Чтобы проанализировать размер пакета: -

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

Не забудьте иметь доступ к исходным файлам карт (которые можно получить, собрав с помощью ng build --prod --sourceMap=true)

ПРИМЕЧАНИЕ. Я лично использовал webpack-bundle-analyzer в течение довольно долгого времени. Но с этого момента source-map-explorer.

Изменить [2020-06-08]

Консоль Angular была переименована в Nx Console. Когда вы переходите к консоли в VSCode, вы можете запустить команду build с включенной опцией statsJson. Это создает, в зависимости от вашей конфигурации TypeScript, некоторые файлы stats-es*.json в каталоге сборки вместе с скомпилированным материалом. Их вы можете использовать с webpack-bundle-analyzer (как указано в принятом ответе)

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

настройте номер EcmaScript в соответствии с вашими настройками.

Старый ответ

Начиная с консоли Angular 7.4, появился новый способ анализа пакетов Angular.

• Установите расширение vscode «Angular Console» от технологий Nrwl.
• Необязательно: если вы этого не сделали, превратите свое рабочее пространство в рабочее пространство nrwl-nx с помощью ng add @nrwl/schematics (это просто расширенное рабочее пространство angular, но оно также работает с рабочим пространством angular по умолчанию).
• Перейдите в раздел Проекты > выберите приложение, которое хотите создать, и запустите команду сборки с 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/stats.json" ,
      "build-analyze": "npm run build:stats && npm run analyze",
    - Run `npm run build-analyze`