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

问题描述

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

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

非常感谢！

解决方案

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

<块引用>

默认情况下，预加载是关闭的，所以设置这个属性就可以了没有什么.预加载在应用程序后热切加载所有深层链接靴子而不是根据需要按需提供.要启用预加载，请设置主应用程序模块配置中的 preloadModules 为 true:

@NgModule({声明:[我的应用],进口:[浏览器模块，IonicModule.forRoot(MyApp, {preloadModules: true//<- 这里！})],引导程序:[IonicApp]，入口组件:[我的应用]})导出类 AppModule { }

<块引用>

如果开启了预加载，它会根据优先价值.优先级可能有以下值:高"、低"和关".当没有优先级时，将设置为低".

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

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

@IonicPage({名称:'我的页面'，优先级:'高'})

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

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

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

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

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

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?

Thanks alot!

解决方案

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.

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'
})

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)

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

Please notice that preloading pages eagerly may increase the startup time of your app, so try to preload pages as little as possible.

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