Я использую Angular CLI для создания приложения для производства с помощью переключателя --prod. Пакет создан в каталоге dist. Есть ли способ узнать, какие классы и функции были фактически вставлены в комплект после дрессировки и всех других шагов?
Угловой вывод CLI - как анализировать файлы пакетов
Ответ 1
Вы можете использовать webpack-bundle-analyzer для проверки ваших пакетов.
-
npm install webpack-bundle-analyzer --save-dev -
измените раздел
scriptspackage.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). Он отобразит этот круг для каждого из этих файлов. Довольно подробный и простой в использовании.
