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

Опубликовано в Angular • 06 октября 2018 г. • 1 мин. на чтение

Чтобы проанализировать 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

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

Angular. ViewChild, ViewChildren, ContentChild и ContentChildren

@ViewChild - querySelector
@ViewChildren - querySelectorAll
@ContentChild - querySelector внутри ng-content
@ContentChildren - querySelectorAll внутри ng-content

ng-container vs ng-template

It is explain simple difference between ng-container and ng-template tags.

Создание custom form field control (ControlValueAccessor)

Вкратце об writeValue & registerOnChange, пример простого кастомного контрола формы.

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

0 - dashboard
1 - карточка
2 и более - список

Angular. Получить params и queryParams одновременно

combineLatest(
  this._activatedRoute.params,
  this._activatedRoute.queryParams
)