Ionic 3 lazy loading makes a delay with a large html file

Question

I use ion 3 in my project and I have some problems with lazy loading.

I have a ResultPage , and the resultpage.html template contains more than 1000 html lines of code. In HomePage I want to go to ResultPage on navCtrl.setRoot . When I call it, the screen freezes 3-4 times before ResultPage me in ResultPage . This is a really bad UX. This only happens to the lagre teamplate team, and for the first time I enter this page. I decide to remove the lazy load in ResultPage , and the lag disappears. I do not know if this is correct? Can someone please tell me what should I do in this case?

Thanks a lot!

Answer 1

One way to hide this from the user is to still use lazy loading in your application, but preload this specific page. You can see the documents for more information.

By default, preloading is disabled, so setting this property will be nothing. Preloading eagerly downloads all deep links after the app boots, not on demand. To enable preloading, set preloadModules in the configuration of the main application module to true:

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

If preloading is enabled, it will load modules based on priority value. The following values ​​are possible for priority: high, low, and off. If there is no priority, it will be set to Low.

First all deep links with priority set to high will be loaded. Upon completion of loading the “high” priority modules, all deep links with the priority “low” (or without priority) will be loaded

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

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

So, in your case, I will try to set the priority to high:

• The first pages that the user will interact with when loading the application (for example, HomePage)

• ResultPage so that it is already preloaded and displayed faster when the user is redirected to it.

Please note that pre-loading pages with impatience may increase the launch time of your application, so try to pre-load pages as little as possible.