Ionic 3 lazy loading make lag with large html file

Question

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!

Answer 1

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.