angular 通用应用性能，APP_BOOTSTRAP_LISTENER，闪烁

Question

Angular 4.4.6
Angular CLI 1.3.2
Node 6.x.x
NPM 3.10.10
Webpack 3.4.1

在Angular通用应用程序中，当服务器视图切换到客户端视图时，屏幕会闪烁，因为所有在服务器端渲染中调用的API，也在客户端渲染中调用, 由于有闪烁.

为了消除这种闪烁，我实现了 Angular 通用传输模块，它在服务器端渲染时将数据存储在地图缓存 (private _map = new Map<string, any>();) 中，并将其传输到客户端，因此客户端不需要再次调用 api 并立即从缓存中获取数据。

并且传输是通过此提供商进行的。

{
    provide: APP_BOOTSTRAP_LISTENER,
    useFactory: onBootstrap,
    multi: true,
    deps: [
        ApplicationRef,
        TransferState
    ]
}

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
    return () => {
        appRef.isStable
        .filter(stable => stable)
        .first()
        .subscribe(() => {
            transferState.inject();
        });
    };
}

这样闪烁消失了，但是应用程序性能下降了，在对应用程序进行负载测试时，闪烁的结果比不闪烁的应用程序更快，这是为什么？

可能是因为在负载测试的情况下或机器人访问网站时没有浏览器，所以缓存永远不会被清除，它只会用缓存内存填充服务器并且服务器变慢，可能是什么解决方案为此，要么通过在 nginx 级别识别请求，为机器人和真实用户创建不同的实例，oe angular universal.

中我还缺少其他一些东西

Answer 1

编辑：此解决方案适用于angular 5

当我遇到闪烁问题时，我只是将 BrowserTransferStateModule 添加到客户端应用程序

//app.module.ts
import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
imports: [
//...
BrowserModule.withServerTransition({appId: 'my-app'}),
BrowserTransferStateModule,

然后 ServerTransferStateModule 到服务器应用

//app.server.module.ts
import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';

//...
 imports: [
AppModule,
ServerModule,
ServerTransferStateModule

我修改了 main.ts 以在加载 dom 后引导应用程序

//main.ts
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
});

我没有像你那样使用 APP_BOOTSTRAP_LISTENER（不确定是否有区别）

angular 通用应用性能，APP_BOOTSTRAP_LISTENER，闪烁

angular universal app performance, APP_BOOTSTRAP_LISTENER, flicker

javascript

nginx

server-side-rendering

angular-universal

angular