在 Angular 中使用预加载策略会增加初始加载时间

Question

我在我的应用程序中使用延迟加载。但是一旦我访问了那条路线，我的特色模块就需要时间来加载。因此，为了减少加载时间，我使用了 Angular 预加载策略。但是由于应用程序的初始加载时间增加了。

理想情况下，功能模块应该在后台加载，不应增加初始加载时间。

为了预加载，我将这段代码添加到我的路由模块中。

RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})

可能是什么问题？

Answer 1

即使我有同样的问题，我通过删除 preloadingStrategy 解决了这个问题，取而代之我让装载机在 app.component 处更改路线。 ts,

所以用户至少知道加载数据需要一些时间

isLoading : boolean = false;

this.router.events.subscribe((event: Event) => {
   switch(true) {
     case event instanceof NavigationStart: {
       this.isLoading = true;
       break;
     }

     case event instanceof NavigationCancel:
     case event instanceof NavigationError:
     case event instanceof NavigationEnd: {
      this.isLoading = false;
      break;
    }
     default: {

      }
   }
 })

......加载中......

Answer 2

是的。这就是 pre-loading 策略在 Angular 中的运作方式。每当任何模块为 pre-loaded 时，它都会在加载所有急切加载和需要延迟加载的模块后在后台加载。之后 pre-loading 个模块开始。由于在正常构建和开发构建（非 aot 构建）的情况下，所有 pre-loaded 个模块首先被编译和加载，这增加了当前模块的加载时间。

但在 aot build 中不会出现此问题，因为大部分时间都用于编译将在 aot build 中跳过的模块。

Answer 3

我制作了一个关于如何创建自定义预加载策略的简短视频说明 - https://www.youtube.com/watch?v=tDQc3CCvKfc

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

在 Angular 中使用预加载策略会增加初始加载时间

Initial load time is increasing by using preload strategy in Angular

lazy-loading

preloading

angular