I have integrated AOT compiler in my ionic project. App is still taking 6-7 seconds to appear first screen

Ionic Framework ionic-v3
21

Create a new project with ionic start blank blank and run that and measure.
Now add the plugin and see if it adds the expected >5 seconds.
If not, it’s not as easy as we thought…

22

As expected, it is taking 5-6 seconds. :expressionless:

23

Just adding or also using it?

24

Just added and imported into component.ts

25

Try really just installing it on the command line and not changing anything in the code.
(We are drilling down to the exact reason why it gets slower)

26

It takes 776 ms then. :slight_smile:

27

There are two (.js) files that needs to be referenced in index.html to use pdfmake plugin.

  1. pdfmake.min.js (1016 KB)
  2. vfs_fonts.js (934 KB)

Can those files cause problem?

28

Ok, so if you don’t import it to components it gets fast again, correct?

Yeah, that is almost 2 MB of Javascript that has to be loaded and parsed on startup. That can be quite a lot.
Can you add just one and see if the load increase is halved then?

I think you might have to find a way to only load these two files when their functioanlity is actually needed, not on startup. (Adding them to index.html of course also makes lazy loading the page where they are needed useless as this is not part of lazy loading…)

29

Yes, if i don’t import it to component and just add to index.html. It works fine.

1 Like
30

What should i do?:face_with_raised_eyebrow:

31

I haven’t tried this, and don’t know if it will work in real life. But the theoretical solution is to construct a bridge from pdfMake to Angular, and to lazy-load that provider when you reach the page that makes the pdf. I did a search on npm, and there’s a library ng-pdf-make that looks as though it might work. But I just read the readme. I haven’t looked at any code or tried it myself. And there might be other/better libraries also, or you could write your own Angular container for pdfMake. But to recap:

  1. Find or write an Angular container for your plugin.
  2. Import that container as a provider. Either lazy load the provider or lazy-load the page that uses the provider, or both.
  3. Run tests to make sure it works.
32

This PDF thing you are using is not a Cordova plugin, but a normal JS library, right?
Are there no alternatives that do the same thing?

My approach would be a bit more brute force than what @AaronSterling suggested:
Can you maybe just load the JS files on the template of the reporting page instead of index.html? That might lead to timing issues (JS code executed before the files are parsed and loaded), but that can probably be worked around somehow.

1 Like
33

Yes, i think so.

I found this easiest one.

I just tried this solution, you know what it worked like a charm…!!! Hurrah… i’m so happy :smiley:

Thank you so much @Sujan12, @rapropos from your continuous support.

Application startup time is now reduced to 1.7-2 seconds.

I have used Lazy loading for all the pages and created individual modules for all the page components. Also i imported Native plugins into individual modules(where it is actually required) instead of putting all together in app.module.ts

Let me check now if removing only lazy load will reduce some more time or not.

2 Likes
34

With Lazy loading startup time is 1.7-2 seconds
Without Lazy loading startup time is 3.5-4 seconds

So, Lazy load wins…

1 Like