Угловой вывод CLI - как анализировать файлы пакетов

Я использую Angular CLI для создания приложения для производства с помощью переключателя --prod. Пакет создан в каталоге dist. Есть ли способ узнать, какие классы и функции были фактически вставлены в комплект после дрессировки и всех других шагов?

Ответ 1

Вы можете использовать webpack-bundle-analyzer для проверки ваших пакетов.

npm install webpack-bundle-analyzer --save-dev
измените раздел scripts package.json с помощью команды "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
npm run analyze

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

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

ОБНОВИТЬ:
В случае, если вы используете угловую консоль, теперь она имеет встроенную функцию анализа связки

Ответ 2

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

Установите расширение vscode "Angular Console" по технологиям Nrwl.
Необязательно: Если вы этого не сделали, превратите свое рабочее пространство в рабочее пространство nrwl-nx с помощью ng add @nrwl/schematics (это просто расширенное угловое рабочее пространство, но оно также работает с угловым рабочим пространством по умолчанию).
Перейдите в Проекты > Выберите приложение, которое вы хотите собрать, и запустите команду сборки с aot и production.

И это оно. Выход следующий. Он содержит размер пакета и все части пакета. Вы можете выбрать файл, который вы хотите проанализировать (main/polyfills/1/etc). Он отобразит этот круг для каждого из этих файлов. Довольно подробный и простой в использовании.