首次应用渲染后延迟模块预加载

Question

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

目前，我没有设置任何preloadingStrategy，因此，在加载页面时，只加载活动卡片的内容。

我试图将 preloadingStrategy 设置为 preloadAllModules，它工作正常，但它减慢了应用程序的启动速度。实际上，当所有模块同时加载时，活动卡的内容显得较慢。

=> 我想要的是：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
});