延迟模块在首次应用呈现后预加载

Question

我目前正在开发一个单页应用程序。 在主页中显示几张卡片。 这些卡可能已启用或禁用。 如果禁用，则仅显示卡片的标题。 如果启用，将显示卡片的标题和内容(延迟加载) 默认情况下，所有卡都处于禁用状态。 根据用户的档案，某些卡片在加载页面时可能处于活动状态。

目前，我没有设置任何预加载策略，因此，在加载页面时，仅加载活动卡的内容。

我尝试将预加载策略设置为预加载所有模块，它工作正常，但它会减慢应用程序的启动速度。实际上，由于所有模块同时加载，因此活动卡的内容显示得较慢。

=> 我想要的是： 1. 加载应用程序 2.加载所有活动卡的内容 3. 预加载启动时未显示的所有其他模块

=> 首次渲染后某种延迟预加载

=> 你认为这可能吗？

提前感谢您的反馈

Answer 1

我相信这是可能的，你必须制定一个自定义的预加载策略：

您可以像这样更新根路由器配置：

@Injectable({
providedIn: 'root'
})
export class CustomPreload implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any> {
// you implement this function somewhere, somehow
if (isActiveCardRoute(route)) {
// this will make it load immediately
return load();
} else {
/* 
* this will load the remaining modules after 5 seconds. You can possibly make a more
* 'complex' logic to have it load sequentially or in bigger intervals to make sure
* the app doesn't lag when loading
*/
return timer(5000).pipe(
switchMap(() => load())
)
}
}
}

如果您需要在此之前以某种方式通过加载 api/登录来了解卡是否处于活动状态。您需要将此逻辑添加到APP_INITIALIZER，或者我想您也可以通过注入适当的服务将其添加到CustomPreload中。

这个CustomPreload，你可以添加到你的RouterConfig：

RouterModule.forRoot(AppRoutes, {
preloadingStrategy: CustomPreload
});

Answer 2

我创建了一个简短的视频，解释了如何创建自定义预加载策略 - https://www.youtube.com/watch?v=tDQc3CCvKfc 其中显示了如何创建延迟并使预加载可选

这是代码 - https://github.com/stevermeister/AngularPro-Screencast/tree/master/code/Season4-Router-Features/preloading