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

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate">

forkJoin - параллельные запросы, mergeMap - последовательные запросы

На память. Некоторое время назад я решил достаточно необычную задачу, но в последствии на backend`е переделали логику и код был удалён из проекта.

ng build --watch
npx lite-server --baseDir="dist/project-name"

KeyValueDiffers позволяет отслеживать мутации свойств объектов

Решение, позволяющее размещать frontend на поддомене (dci.example.com) или на префиксе маршрута (example.com/dci).