App boot time: current state and best practices

Ionic Framework ionic-v3
#11

In your package.json

"scripts": {
    "build": "ionic-app-scripts build --rollup",
 ....

then you can run ionic build android --prod or call npm run build

you can also create platform specific scripts by copying and customizing configurations from node_modules/@ionic/app-scripts/config, for example to remove all non material design CSS or some unneeded fonts from final package:

"scripts": {
    "build-android": "ionic-app-scripts build --rollup ./config/rollup.config.js --experimentalManualTreeshaking true --experimentalPurgeDecorators true --sass ./config/sass.config.md.js --useExperimentalClosure true --closure ./config/closure.config.js",

then run
npm run build-android --prod

and

cordova build android --release

to create android release package

1 Like
#12

@alfabetagama thx for your answer, that would explain why I could achieve it on iOS :wink: May not be a solution for me then, as much as possible, want to stick to the same solution for both iOS and Androi

#13

According to this: https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit it is possible to use lazy loading.

There is this question too: http://stackoverflow.com/questions/43339695/ionic-3-refer-a-new-page-in-app-module-issue

#14

@brunosmartin yes you’re right, it’s possible to do lazy loading with Ionic 3.

But is, in my point of view, not yet mature. The major reason behind that is that code, of components, may most probably duplicated in your different bundles.

For example see: https://github.com/driftyco/ionic-app-scripts/issues/867

#15

About lazy loading, Mike from Ionic published a first article yesterday:

http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

#16

If you app is only accessible via a login, there is an interesting post with some ideas about how to design the root pages and services. It allowed me to save some ms:

#17

About lazy loading, I don’t use it right now because including the components result in my project of many duplication of their codes in the bundles.

But there is hope, therefore I just list here some issue/pull request I found related to this subject:

Webpack issue: https://github.com/webpack/webpack/issues/3981

Webpack related PR: https://github.com/webpack/webpack/pull/4416 and https://github.com/webpack/webpack/pull/4255

Angule CLI issue: https://github.com/angular/angular-cli/issues/6204 and https://github.com/angular/angular-cli/issues/2771

Ionic app-script issue: https://github.com/driftyco/ionic-app-scripts/issues/867

(Currently) best practice for lazy-loading and module per component?
#18

Hello @alfabetagama, We used ionic v2.2.0 and typescript v1.0.0 and made 14-15 features in my app and also used 8-10 ionic plugins which is used in application. My app takes 20-22 sec to load app in android and ios device. so, my question is why it takes that much time? Do you know about Lazyloading or any preloading technique so we can reduce app load time… we used ionic build android --prod --release command to generate .apk file. Please help me… thank you

#19

Hello @reedrichards, We used ionic v2.2.0 and typescript v1.0.0 and made 14-15 features in my app and also used 8-10 ionic plugins which is used in application. My app takes 20-22 sec to load app in android and ios device. so, my question is why it takes that much time? Do you know about Lazyloading or any preloading technique so we can reduce app load time… we used ionic build android --prod --release command to generate .apk file Please help me… thank you

#20

Hi @Dhyanandra your question is way to open :wink:

Plz open a separate post and document it with logs output and other (more) informations otherwise it will be hard for the community to help you

#21

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
#22

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

#23

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

#24

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…

#25

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…

http://blog.ionic.io/what-progressive-web-apps-can-do-for-you/

#26

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

When opening app it stays on blank screen
#27

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

#28

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:

#29

That can be managed pretty well anyway.

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

#30

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