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

Question

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

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

非常感谢!

Answer 1

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

By default, preloading is turned off so setting this property would do nothing. Preloading eagerly loads all deep links after the application boots instead of on demand as needed. To enable preloading, set preloadModules in the main application module config to true:

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

If preloading is turned on, it will load the modules based on the value of priority. The following values are possible for priority: "high", "low", and "off". When there is no priority, it will be set to "low".

All deep links with their priority set to "high" will be loaded first. Upon completion of loading the "high" priority modules, all deep links with a priority of "low" (or no priority) will be loaded

Setting the priority is as simple as passing it to the @IonicPage decorator:

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

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

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

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

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