Angular SSR - использование performance.now() как в браузере, так и на сервере

Question

Я хочу установить некоторые показатели производительности в моих компонентах Angular, чтобы измерить, сколько времени требуется для обработки и рендеринга выбранных компонентов. Они отлично работают при запуске приложения в «клиентском режиме», но как только я запускаю приложение в режиме SSR, я получаю «производительность» не определена.

Я попытался импортировать его из внутреннего модуля узлов perf_hooks, но затем я получил неизвестный модуль perf_hooks при вызове из app.component.ts.
https://github.com/buggy1985/angular-ssr-performance/blob/HEAD/src/app/app.component.ts#L17

Если я использую performance.now () в server.ts, похоже, он работает. https://github.com/buggy1985/angular-ssr-performance/blob/HEAD/server.ts#L13

Могу ли я передать класс производительности из server.ts в компонент? И чтобы браузер вернулся к window.performance? Или что я не так делаю?

Answer 1

Наконец-то мне удалось решить эту проблему, предоставив правильный api производительности в зависимости от платформы.

Вот полный коммит с моими изменениями:https://github.com/buggy1985/angular-ssr-performance/commit/39aa08489e589172fa9bce6f1f5588f5eb962337

Я в основном создал нового провайдера, который вводит импортированную производительность из perf_hooks в server.ts

      import { performance } from 'perf_hooks';
export const PERFORMANCE_API = new InjectionToken('performance-api');
...

@NgModule({
  providers: [
    { provide: PERFORMANCE_API, useValue: performance },
  ],
}

и вставляет windows.performance в app.browser.module

      providers: [
  { provide: PERFORMANCE_API, useValue: window.performance },
],

В app.component.ts вместо прямого использования производительности вы должны ввести ее в конструктор, а затем использовать как this.performance.

      constructor(@Inject(PERFORMANCE_API) private performance) {
    console.log(this.performance.now());
}