Анализ бандла Angular приложения

Чтобы проанализировать bundle, следует сделать build Angular CLI приложения с флагом --stats-json

ng build --stats-json

В этом случае в dist каталоге создается файл stats.json, который может быть проанализирован с помощью таких инструментов, как:

Визуализация с помощью webpack-bundle-analyzer

Установка глобально

npm i webpack-bundle-analyzer -g

Анализ stats.json файла

webpack-bundle-analyzer <path-to>/stats.json

Браузер откроется по адресу http://127.0.0.1:8888/ с содержимым вида:

screenshot-webpack-bundle-analyzer-127.0.0.1-8888.png


Похожие записи

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).

06 января 2019 г. в Angular

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.