Lazing Loading vs. Standard 3.0.1 App Results - 238 Pages


#1

Alright everyone, I spent about 6 hours today getting everything moved over to lazy loading and have some results to share.

My app is 238 pages of html/CSS and the only provider that I have added is NativeAudio to play small audio files. I’ve got main.js sizes and launch time below, as you can see the lazy loading made a GIANT difference. I felt like 19 seconds was basically unacceptable as far as launch time goes and was uncomfortable publishing my app on the app store. Now that launch time is down to just over 2 seconds I will happily submit it feeling like users can have a good experience.

Before lazy loading:

  • Main.js - 6.5 MB
  • iPhone SE simulator app launch time - 19 seconds

After lazy loading:

  • Main.js - 4.1 MB
  • iPhone SE simulator app launch time - 2.2 seconds

Other Comments

  • Ionic view no longer works on my lazy-loaded app build. For some reason it launches to a blank screen and never pulls up my home page.
  • Update time for the webpack on ionic serve is over 3 minutes on the lazy loading project, so I save my changes less frequently. On the non lazy loading project it’s around 5-6 seconds for ionic serve updates so I regularly save and check the results in real time. I can’t do that anymore, but the tradeoff in launch time is well worth it.
  • I haven’t added android to my project yet but I will report back later with information for android lazy loading vs. non lazy loading.
  • Lazy loading update script from Ionic Academy was good and saved me many hours, but still missed a few page name to string conversions and a few other small things took an hour or two to clean up. Still a HUGE help compared to doing everything manually on a project this big.

#2

Is that 6.5MB number built with Angular 2 or 4?


#3

Angular 4. Both projects have identical dependencies, all up to date AFAIK.


#4

Hmm. And the 4.1MB number includes all the [NNN].main.js files that make up each page chunk? That seems mysterious.


#5

No sorry I just have the size of the main.js, I have 238 additional ###.main.js, each between 10 and 50 KB


#6

That makes more sense. Probably the best apples-to-apples comparison would be either the result of du -s on the build directory or the size of a built .apk.