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

Опубликовано в Angular • 06 октября 2018 г. • X mins read

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

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

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне <ng-template>, использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.