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.