App boot time: current state and best practices

About loading time, I did some optimizations and got 417ms loading time.
Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/9118

Our site is completely on Ionic2 beta.8
I written tutorial on https://www.sherpadesk.com/blog/optimizing-mobile-ionic-2-angular-2-app-for-production

Used techniques:

  • use loading page
  • use ServiceWorkers
  • divide bundle to vendor and app code (to cache vendor.js)
  • embed templates in js code, no separate server request to HTML template

Cool, interesting post.

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

I use loading page on app on device.

the trick is to show page and then load cordova and other scripts.

You can check my post https://www.sherpadesk.com/blog/optimizing-our-mobile-ionic-2-angular-2-speed-up-the-initial-loading-time

Also you can do redirect to app page, so first loading page will be very fast

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

Wait & see…

Can you share your package.json? I came up with this issue

Update to the collection of links I posted abord: A new PR https://github.com/webpack/webpack/pull/5764 was submitted to replace https://github.com/webpack/webpack/pull/4255 which was pendent for a long time

Webpack https://github.com/webpack/webpack/pull/5764 has been merged and version 3.7.0 ou webpack is out :tada:

I guess that is an important step towards the not duplication of components codes while using lazy loading :slight_smile:

That can be managed pretty well anyway.

Are you putting your components into a shared module and importing said module into app.module.ts?

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

Biggy’s leave out. Smaller ones in.

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

Long term action, the next generation of Ionic, respectively 4, should kick ass and reduce the load time, see https://blog.ionic.io/ionic-2017-18-roadmap/

Other news, some PR went thru about taking care of deep children in build aka “don’t duplicate components codes used in multiple modules in resulting bundle”. Don’t know when this gonna land into ionic app-scripts, but things are moving (see https://github.com/webpack/webpack/issues/3981, https://github.com/webpack/webpack/pull/5764 and https://github.com/angular/angular-cli/issues/2771)

1 Like

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.

@rapropos thx for the feedback about bundle

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.

cool good to know. might give a try one of these days, now I did modified everything to use manually svg, gonna be fine for a while :wink:

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 :grinning:

1 Like

@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