Анализ бандла 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

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

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Angular Storybook

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

30 октября 2018 г. в Angular

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.

Angular routerLink conditionally 

<a [routerLink]="myVar ? '/home' : null" routerLinkActive="is-active">Home</a>
or
<a [routerLink]="myVar ? ['/home'] : []">Home</a>
03 сентября 2019 г. в Angular