Ionic 3延迟加载使得大型html文件滞后 [英] Ionic 3 lazy loading make lag with large html file

问题描述

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

i am using ionic 3 in my project and i have some problems with lazy load.

我有一个 ResultPage 使用模板 resultpage.html 具有 1000 html行代码。在主页中我想通过 navCtrl.setRoot ResultPage C>。当我调用它时，屏幕在3-4s内冻结，然后转到 ResultPage 。这真的是一个糟糕的用户体验。它只发生在lagre teamplate并且在我第一次进入该页面时。我决定删除 ResultPage 中的延迟加载和滞后消失。我不知道这是正确的方法吗？有人可以告诉我在这种情况下该怎么办？

I have a ResultPage with the template resultpage.html has more than 1000 html lines code. In the HomePage i want to navigate to ResultPage by navCtrl.setRoot. When i call it, the screen freeze in 3-4s before take me to the ResultPage. It is really a bad UX. It only happen with lagre teamplate and in the first time i enter that page. I decide to remove lazy load in ResultPage and the lag disapear. I don't know is it a right way? Can some one please tell me what should i do in this case?

非常感谢！

推荐答案

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

One way to hide that from the user, would be to still use lazy load in your app, but preloading eagerly that specific page. You can take a look at the docs for more info.

默认情况下，预加载已关闭，因此设置此属性将无效
。在应用程序
启动后，预加载会急切加载所有深层链接，而不是根据需要启动。要启用预加载，请将主应用程序模块配置中的
preloadModules设置为true：

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 { }

如果打开预加载，它将根据
优先级值加载模块。优先级可以使用以下值：
high，low和off。如果没有优先级，则将其设置为
low。

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".

将首先加载优先级设置为high的所有深层链接。
完成加载高优先级模块后，将加载优先级为低（或无优先级）的所有深层链接

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

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

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

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

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

So in your case, I'd try by setting the priority to high to:

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

• The first pages that the user will interact with when the app is loaded (the HomePage for example)

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

The ResultPage in order to keep it already preloaded and show it faster when the user is redirected to it.

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

这篇关于Ionic 3延迟加载使得大型html文件滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！