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

Question

我在我的项目中使用 ionic 3，但我在延迟加载方面遇到了一些问题。

我有一个ResultPage 模板resultpage.html 有超过1000 行代码。在HomePage 中，我想通过navCtrl.setRoot 导航到ResultPage。当我调用它时，屏幕会在 3-4 秒后冻结，然后再将我带到ResultPage。这真的是一个糟糕的用户体验。它只发生在 lagre teamplate 并且在我第一次进入该页面时。我决定删除ResultPage 中的延迟加载，延迟消失。我不知道这是正确的方法吗？谁能告诉我在这种情况下我该怎么办？

非常感谢！

Answer 1

向用户隐藏它的一种方法是在您的应用中仍然使用延迟加载，但急切地预加载该特定页面。您可以查看the docs 了解更多信息。

默认情况下，预加载是关闭的，所以设置这个属性就可以了 没有。预加载在应用程序后热切加载所有深层链接 靴子而不是根据需要按需提供。要启用预加载，请设置 主应用程序模块配置中的 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'
})

所以在你的情况下，我会尝试将优先级设置为：

• 加载应用时用户将与之交互的第一个页面（例如主页）

• ResultPage 以保持它已经预加载并在用户重定向到它时更快地显示它。

请注意，急切地预加载页面可能会增加应用的启动时间，因此请尽量少预加载页面。