Ionic 3延迟加载使得大型html文件滞后

Question

我在我的项目中使用离子3,我有一些延迟加载的问题.

我有一个ResultPage与模板resultpage.html有超过1000的HTML代码行.在HomePage我想导航到ResultPage的navCtrl.setRoot.当我打电话给它时,屏幕在3-4s内冻结,然后带我去ResultPage.这真的是一个糟糕的用户体验.它只发生在lagre teamplate并且在我第一次进入该页面时.我决定删除延迟加载ResultPage和滞后消失.我不知道这是正确的方法吗？有人可以告诉我在这种情况下该怎么做？

非常感谢!

Answer 1

从用户那里隐藏它​​的一种方法是在你的应用程序中仍然使用延迟加载,但是急切地预加载该特定页面.您可以查看文档以获取更多信息.

默认情况下,预加载已关闭,因此设置此属性将不执行任何操作.在应用程序启动后,预加载会急切加载所有深层链接,而不是根据需要按需加载.要启用预加载,请将主应用程序模块config中的preloadModules设置为true:

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      preloadModules: true // <- Here!
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule { }

如果打开预加载,它将根据优先级值加载模块.优先级可以使用以下值:"高","低"和"关".没有优先级时,它将被设置为"低".

将首先加载优先级设置为"高"的所有深层链接.完成加载"高"优先级模块后,将加载优先级为"低"(或无优先级)的所有深层链接

设置优先级就像将其传递给@IonicPage装饰器一样简单:

@IonicPage({
  name: 'my-page',
  priority: 'high'
})

所以在你的情况下,我会尝试将优先级设置为高到:

• 加载应用时用户将与之交互的第一个页面(例如HomePage)

• 在ResultPage以保持它已经预装和更快的表现出来,当用户被重定向到它.

请注意,预加载页面可能会增加应用程序的启动时间,因此请尽可能少地预加载页面.