通过在Angular中使用预加载策略，初始加载时间增加

Question

我在我的应用程序中使用延迟加载。但是，一旦我访问该路线，我的特色模块就会花时间加载。因此，为了减少加载时间，我使用的是角度预加载策略。但是由于app的初始加载时间增加了。

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

对于预加载，我将此代码添加到我的路由模块。

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

可能是什么问题？

Answer 1

是。这就是Angular中预加载策略的工作原理。每当任何模块被预加载时，它在加载所有急切加载和需要的延迟加载模块后在后台加载。之后，模块的预加载开始。因为所有预加载的模块在正常构建和开发构建（非Aot构建）的情况下首先被编译和加载，这增加了当前模块的加载时间。

但是在Aot构建中，这个问题不会发生，因为大多数时间用于编译将在构建中跳过的模块。

Answer 2

即使我有同样的问题，我通过删除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 3

谢谢，@ wentjun。我也试过使用自定义预加载器。问题仍然存在。每当这些模块加载时，屏幕就会冻结。看起来像bundle需要时间来编译。但幸运的是，我尝试部署这些更改，并发现这个问题在生产中并不存在因为aot。