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!

Sampath · Accepted Answer · 2017-11-27 17:19:06Z

5

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

edited Nov 27, 2017 at 17:19

answered Nov 27, 2017 at 17:03

Sampath

66.2k70 gold badges327 silver badges462 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

t0nty Over a year ago

So I need to move between all of my pages and add this module?

Sampath Over a year ago

You need to do little bit lengthy work here. Please read the 2 docs which I have shared above and after that ask any questions if you have.

t0nty Over a year ago

Thanks, I will, By the way I didn't understood how to update the Angular/Ionic. just updated the CLI to 3.19.0 but what else?

t0nty Over a year ago

Thanks man, Also tried to do the convertion and it didn't went well..I'll try again and let you know! Thanks again for your help!

Sampath Over a year ago

Ok sure.. NP :)

|

Collectives™ on Stack Overflow

Convert ionic app to lazy loading

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related