Анализ бандла 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 с использованием CLI >= 6 версии.

httpRequest.pipe(
  repeat(),
  takeUntil(stop$)
).subscribe(x => console.log(x));

ng add @nguniversal/express-engine --clientProject 
npm run build:ssr && npm run serve:ssr

Использование переменных окружения Docker контейнера в Angular environment.

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.

// Jest
const serviceMock = {
 methods: jest.fn(),
 you: jest.fn(),
 want: jest.fn(),
 to: jest.fn(),
 mock: jest.fn()
};