Header Ads

Lazy Loading in ionic 3

Lazy Loading in ionic 3

Our main goal to remove lazy loading from the ionic framework, we are still lacking in lazy loading.
Lazy loading is a design pattern commonly to defer initialization of a component in app-module.  if we stop a lazy loading, gives a major boost of performance.

In Ionic 2, all the component and pages are loaded in app.module so it will lead to lazy loading, and when we open an app, it will take 15-20 seconds to load an app. its a big drawback for the project and image loading will dump our app. In an update of the ionic framework, the ionic 3 is introduced, the main drawback of lazy loading and boot time loading is solved. The structure is like

In app.module, all components are loaded at the start of the app, now in ionic 3, use component in own self-contained module. Lazy loading can be controlled by two different approaches
                                     1) Encapsulated module
                                     2) share common module

Encapsulated module 

In approach, we can use the self-contain module and enclose all custom component and data into the distinct module, all pages have a separate module and it will enclose the page component. 

within a code, see how the component exported in the encapsulated module, this module contain all component used in a page and ng module is default module in all ionic project. The sample module in a feed local page.

In ionic page, use ionicPageModule to name a dummy, through this module without importing a page in module and typescript, page redirect to another page. To redirect a page navcontroller and navpush are used.

shared common modules

in approach, instead of splitting into their own isolated module, all component get bundled into a single shared module and used in all the pages. it easier to manage all components, directives, and pipes in the single shared module.

Post a Comment