Angular profile Change Detection

Спрева внесите изменения в файл main.ts

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(ref => {
    const applicationRef = ref.injector.get(ApplicationRef);
    const appComponent = applicationRef.components[0];
    enableDebugTools(appComponent);
  })
  .catch(err => console.log(err));

Обратите внимание на функцию enableDebugTools. Она добавляет объект ng в глобальную область видимости window.

Далее следует в консоли инструментов разработчика вызываеть метод ng.profiler.timeChangeDetection(), который многократно запускает механизм change detection и подсчитывает среднее время.

Откройте консоль (CTRL+SHIFT+I) и выполните команду:

ng.profiler.timeChangeDetection();

P.S. Анализ компонента

ng.probe($0)

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

Angular & MVVM

  • Model - just file like user.class.ts
  • View - HTML template of component
  • ViewModel - Typescript part of a component
14 апреля 2019 г. в Angular

Angular routerLink conditionally

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