A note to use loading page: this only gonna work on a website not an app. I tried to fully suppress the splash screen and build my own html splash, but unfortunately I noticed that on iOS or Android, don’t remember exactly, the splash screen is mandatory, and therefore, if not provided, it just made the experience of the app booting without splash screen on the device a bit ugly and weird
thx for the clarification, I should maybe give a try
last time I tried, when I was adding a loading spinner in index.html, the solution wasn’t acceptable because I had the feeling that a cordova splash screen was a must on iOS, but like you said, maybe by deferring the loading that would solve it…
The Ionic team published yesterday a blog post about the upcoming Stencil project. A particular sentence might be promising about boot time
All these benefits will also be shipping with the next release of Ionic-Angular, v4.0.0, with only minimal breaking changes. With the built-in code splitting and smaller bundles that comes with web components built with Stencil, we greatly improve the load time performance
I don’t think that is a valid solution, loading all components in app.module.ts would mean loading all components at boot time which is kind of the opposite of the goal of the lazy loading concept
Time to time I like to update this post. So what’s new…
Short term action, the introduction of Ionic 3.9.0 comes with Rxjs 5.2.2 which let you include in your bundle only the operators you need. This could results in a smaller bundle which means faster boot time. I think you don’t gonna save seconds, but still, it’s pretty cool. See https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md
It took me so much time to realize, but I would add the following to this thread:
If you are using font-awesome 4.7 and don’t use that much icons from it, just don’t use it, don’t include font-awesome in your project. Instead, download and include the svg of the icons you need. font-awesome 4.7 is around 600ko. A svg icon is maybe 1ko
If you are using font-awesome 5, I don’t know the status respectively it was planed that only the icon you would use would be packed into bundle but not sure it is yet implemented. If not, I would suggest the same, download and use only what you need, only the svg you need
It is, but you have to be diligent about your import syntax as of this writing. I would recommend using angular-fontawesome as well, as it papers over many troubles you will run into working with FA5 with Angular.
anyway, not related to boot time, I can’t use font-awesome v5 because I would need brand icons which fck up Ionic fab buttons (https://github.com/FortAwesome/Font-Awesome/issues/12437) and since this issue may be never resolved (4 months old) importing svg manually is in any way the workaround I have to apply
Have you tried angular-fontawesome? I believe it might be able to allow you to disable the automated svg-rewriting that is causing your problem there, as it is not reliant on CSS classes.
I just booted my Ionic 3 app (30+ pages, 60+ components, 40+ providers, 10+ plugins) in 2.5 sec on my iPhone 6s (including the backend requests to load the data), so nothing new but that’s cool
@rapropos for the record, I gave a try to angular-fontawesome because I noticed that my website bundle size where I use font-awesome went insane
look like the tree shaking import of font awesome v5 in an angular project is still buggy if a workaround of importing explicitly each fonts isn’t done
Btw. for those upgrade to Ionic v4 / Angular v6 and using Moment, you might face a problem that the workaround to include the locales isn’t working anymore respectively all locales will be added to the bundle