Pre-load IonicPages

Ionic Framework ionic-v3
1

Hello guys,

I noticed during the development of anapp, that the first time I enter the page, the module for the page is loaded, then the page itself is loaded and it enters. That is a slow process for the first time. The second time i’m visiting the page it’s faster.

I want to know if there is a way to preload a page so it gets cached.

Thanks !

2

Yes, you can set the preload option. But is your app built for production? If not, build for production first, and check the times again. Also, the less computation you put in a page’s constructor, the better. The less it has to build, the faster it will render. Variable definitions in the constructor, computation in ngOnInit() or later.

3

When my app is built for production, things get a little better, but It can improve, I guess.

This video shows what is that I am trying to fix: https://www.youtube.com/watch?v=-oDmY2KiQH8

When I click on the button, some pages takes too long to load in the first time, while others load pretty fast. So I was thinking about caching those lazy pages :slight_smile:

Thanks for your reply.

4

Read the IonicPage docs. There’s a preloadModule option. I don’t know if that will fix your problem, or just move it to another place, but you might want to play around with it.

5

I’ll try that and i’ll come back here to show you the results !

6

How did you implement your buttons? Might http://ionicframework.com/docs/troubleshooting/#click-delays be relevant?

7

Hello :slight_smile:

i’m doing like this:

  <ion-tabs #myTabs color='primary' >
    <ion-tab tabTitle="Home" tabIcon="home" [root]="Home" ></ion-tab>
    <ion-tab (ionSelect)="removerNotificacao()" tabBadge="{{novasPostagens}}" tabBadgeStyle="danger" tabTitle="Mural" tabIcon="paper" [root]="Mural" ></ion-tab>
    <ion-tab tabTitle="Novo" tabIcon="people" [root]="Eventos" ></ion-tab>
    <ion-tab tabTitle="Contatos" tabIcon="contacts" [root]="Contatos" ></ion-tab>
    <ion-tab tabTitle="Mensagens" tabIcon="chatboxes" [root]="Mensagens" ></ion-tab>
  </ion-tabs>
8

I think I’ve found something. I removed every ion component from my .html file, like <ion-input> <ion-label>, <ion-textarea>, <ion-radio> and the button didn’t take more then 0,5 second to open the page, i mean, it behaved like it was suposed to.

I think this is related to the bug mentioned here :




9

Make sure to add your information to these issues, or create a new one and link to to all these issues, and include all the information you have. If you can, build a super simple reproduction app and put it on Github.

10

I’ll sure do. I’ll post back here when i’m done, so you can get acquainted with this issue.

1 Like