Ionic 4: Simple starter-like app with tabs gets 'horrible' performance result in Lighthouse

#1

Hi all,

I have a very simple Ionic 4 app, based on the tab starter. The app (built with --prod) is hosted on Firebase Hosting.
When running Lighthouse in latest Chrome I get these results:

Hm, any idea what could be the intrinsic issue here with performance? The app does not do any remote call to APIs, only the built-in lazy loading of modules, anything else is handled locally.

Something seems really wrong:

Thanks!

#2

Don’t know what’s the heck but I could say it isn’t a problem related to Ionic Core as I use just core in my project and get a 100 on every lighthouse score

So maybe something related to the Angular side of the project but even that 6s to load seems a lot

How big is that main.js file?

#3

You build your app using the --prod flag right?

#4

Yep, it is built with ---prod :wink:

main.js on disk on the mac (from the --prod build) is 1.3 MB, BTW.

#5

Ummmm if it’s just a blank app, maybe you could provide the source to the Ionic team in a new issue, provide the metrics too and the sample URL so they have all the information needed to have a look and if possible improve that

#6

Actually, this might even be fine as I have some external 3rd party deps:
@angular/pwa”: “^0.13.0”,
@angular/service-worker”: “^7.2.2”,
“date-fns”: “^2.0.0-alpha.27”,
“dexie”: “^2.0.4”,
“hammerjs”: “^2.0.8”,
“ion2-calendar”: “^3.0.0-rc.0”,
“moment”: “^2.24.0”,

#7

moment might bundle all locales of the entire world, that might be a first thing. the other libs I don’t know

#8

Some more insights:

So yes, moment.js is one thing - but there is surely more…

#9

These locales from moment :tired_face: in Angular < 7 you could add a webpack plugin to filter them but as you can’t extract webpack config from the Angular CLI anymore that isn’t possible anymore. Also I don’t have the issue right here but I think moment won’t do something about it. What I do is, I added a Gulp script to my project which I run before I bundle and which delete all locales I don’t use direct in node_modules

About the right part of your graph, all these small number.hash.js these are the Ionic core. I think I read that it is like this per design and also it shouldn’t be a problem regarding boot time as they are all lazy loaded