Angular SSR - 在浏览器和服务器中使用 performance.now()

Question

我想在我的 Angular 组件中设置一些性能标记和度量，以衡量所选组件处理和呈现所需的时间。当运行在“客户端模式”下运行应用程序时，它们工作正常，但是一旦我运行在 SSR 模式下运行应用程序，我就会得到“性能”未定义。

我尝试从节点 'perf_hooks' 内部模块导入它，但是当从 app.component.ts 调用时我得到了未知模块 'perf_hooks'。
https://github.com/buggy1985/angular-ssr-performance/blob/HEAD/src/app/app.component.ts#L17

如果我在 server.ts 中使用 performance.now() 似乎可以正常工作。 https://github.com/buggy1985/angular-ssr-performance/blob/HEAD/server.ts#L13

我可以将性能 class 从 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 },
  ],
}

并在 app.browser.module

中注入 windows.performance

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

在app.component.ts中不能直接使用performance，必须在构造函数中注入，然后作为this.performance.

使用

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

Angular SSR - 在浏览器和服务器中使用 performance.now()

Angular SSR - using performance.now() in both browser and server

performance

node-modules

browser-api

angular-universal

angular