Convert ionic app to lazy loading

Question

in the middle of work on an Ionic 3 app I started noticing that the app is a lil bit "slow" so I heard about the "Lazy Loading" And I think it would be useful here.. the problem is that I already have a big amount of pages , so I'd like to know, There is any way to Convert those pages to Lazy loading?

Another thing is the animation while changing pages, i made Card that animate in the page when I load it, but the animation is corrupted because the app is slow.. there is a way to make delay at the start of the page load so it would show the animation better?

Thanks!

Answer 1

I highly recommend implementing the lazy loading on your app. It'll give a huge performance boost to your app. I'm telling these things using my own experience.

After that, you need to upgrade your app to Angular 5 / Ionic 3.9.2. That too will give amazing performance improvements and also very small bundle size to your app.

References you may need for it:

Ionic and Lazy Loading Pt 1

Ionic and Lazy Loading Pt 2

Angular 5 / Ionic 3.9.2 release notes

How to upgrade to Angular 5 / Ionic 3.9.2

Step 1: Change your package.json as follows.

"dependencies" : {
  ...
  "@angular/common": "5.0.0",
  "@angular/compiler": "5.0.0",
  "@angular/compiler-cli": "5.0.0",
  "@angular/core": "5.0.0",
  "@angular/forms": "5.0.0",
  "@angular/http": "5.0.0",
  "@angular/platform-browser": "5.0.0",
  "@angular/platform-browser-dynamic": "5.0.0",
  "@ionic/storage": "2.1.3",
  "ionic-angular": "3.9.2",
  "rxjs": "5.5.2",
  "zone.js": "0.8.18"
  ...
},
"devDependencies: {
  "@ionic/app-scripts": "3.1.0"
  "typescript" : "2.4.2"
}

Step 2: Delete node_modules folder.

Step 3: Run > npm i