Ionic - Understanding Lazy Loading

1
votes

Working with ionic 3 I am finally implementing lazy loading into my apps. I have a theoretical question on performance which applies to both Ionic 3/4.

Hypothetically say I have 3 pages:

Page1

Page2

Page3

all of which are lazy loaded.

In addition say I have a modal page called:

ModalPage

This modal page is size 1.5mb.

Assume ModalPage is used in Page 1 and Page 2 and included in the respective module.ts for each page (not in app.module).

My question is:

  1. When I load the app and I open page1 first and then push page 2 onto the stack. As ModalPage is not global and imported separately for page 1 and page 2. Does this mean my app when I open page1 will lazy-load & download the 1.5mb Modal Page and then again another instance of modal page @ 1.5mb when I push page 2 onto the stack? So in total I am downloading 3mb worth of code?

  2. If above is true apart from downloading issues is there any other impact on performance? ie having multiple instances of components/pages loaded via page modules vs globally importing the component/pages into the app.module

1
angularionic-frameworkionic3
It should only be downloaded once - David
3. "this modal page is size 1.5mb". why ? how is that acceptable for mobile app ? - Stavm
It is a theoretical question not a real world example, just trying to understand how best to strategise lazy loading - Ka Tech

1 Answers

1
votes

I have an ionic 3 app that is lazy loading (not using app.module), with a component used in multiple pages. I've never checked the loading pattern, so I fired up a dev instance to check.

Sources Tab If you look at the Sources tab in dev tools, for a debug build (with sourcemaps) you will see at initial load time the shared component isn't loaded at all. Then once I hit a page that needs the component it loads into the standard components directory (when using a debug build, anyway). Hitting a second page that also uses this component doesn't load a second instance of it or anything (in the Sources tab).

Network Tab If you do the same activity, but look at the Network tab, it's not quite as clear. Once you hit that first page that uses the shared component, in my case the file 11.js was requested. Looking at that file, it clearly had the typescript of the shared component in it. I then hit the second page that uses this component, and (in my case) 18.js was downloaded, and it, too, had the typescript of the shared component in it.

Based on this, my impression is that a debug build is downloading the typescript of the shared component multiple times (once per page that needs it). Not sure if a prod build or any other factors would change that result.