Angular 4.4.6
Angular CLI 1.3.2
Node 6.x.x
NPM 3.10.10
Webpack 3.4.1
Run Code Online (Sandbox Code Playgroud)
在 Angular Universal 应用程序中,当服务器视图切换到客户端视图时,屏幕会出现闪烁,因为在服务器端渲染中调用的所有 API 也在客户端渲染中调用,因为存在闪烁。
为了消除这种闪烁,我实现了 Angular Universal Transfer Module,它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();
});
};
}
Run Code Online (Sandbox Code Playgroud)
这样闪烁消失了,但应用程序性能下降了,在对应用程序进行负载测试时,闪烁的结果比非闪烁的应用程序更快,这是为什么?
可能是因为在负载测试或机器人访问网站的情况下,没有浏览器所以缓存永远不会被清除,它只是用缓存内存填充服务器并且服务器变慢,有什么解决方案可以解决这个问题,要么创建机器人和真实用户的不同实例,通过在 nginx 级别识别请求,oe 还有一些我在 angular Universal 中缺少的东西。
javascript nginx server-side-rendering angular-universal angular