Ionic 2 speed up boot time?

Well, we can’t all monitor github, reddit, blogs, twitter, forums, docs etc. for changes every day.
Problems start with docs not having any versioning. Especially descriptions for plugins constantly change, many things are not documented at all (I bet I could find undocumented functions and classes for every single plugin).
ionic-app-scripts for example is not even mentioned anywhere in any docs or tutorial. Why? It seems an integral part of a production app, if you don’t want to write all the scripts yourself. Someone that doesn’t go through all the github projects might never know about it in the first place.
I’m around since ionic 1 and I actually didn’t know about it, though I had my own setup with ionic 1.

Tried deleting .tmp? Then it has to regenerate the files.

Thx for the idea, unfortunately, deleting .tmp didn’t worked

Hey guys,

The Ionic team answered the question on the tracking system.

ionic serve = no AoT
ionic build = AoT, minify, etc.

And furthermore, there is no such option as --release aka when you do “ionic build android/ios” the all productive build is executed aka this option isn’t necessary

So that clear up my question about AoT and --release

Now I still have to discover why my app start in 2 seconds with the emulator and 2-3 times slower on a real devices, even brand new one

i used
"ionic:build": “ionic-app-scripts build --dev”
-> boot time 23 Seconds

without --dev

–> boot time 2 Seconds

you’ve got these results on a real device?

Yes. I had some compiler Bugs without --dev, but i fixed this Bug and now i can build without --dev and it is so fast.

So fast! I’m jealous :wink:

Could you give some hints about the size of your app and maybe the list of the plugins you use if you don’t mind?

I could do what I want, I never achieve such a cool loading time and still try to figure out where it took too much time…

Its taking me around 2 sec or less as well, i love aot, filesize is about 4.7mb

What device are you using?

I see ~2 second start times on iPhone 7. Sony Xperia X5 (Android 6.0) takes around 15-20 seconds, and I have a slower 4.4 device that takes closer to 30 seconds (I had to up timeout limit in config.xml to make it load).

1 Like

i’ve tested on galaxy s6 and iphone7

even more speed


it is Beta 9
I want to migrate to Ionic 2 release when will be available

What is aot?

Thanks!

For the record…

My boot time is still the same (iPhone 6 4-5sec, Nexus 5X 5-6sec, iPhone 4 8-9sec, debugger 1-2sec)

But today for the first time I saw my app running on iPhone 7…it was freaking crazy fast, boot time was maybe 2sec in the worst case, I even had the feeling it was faster

set up this option in your confix.xml

and write this in your this.platform.ready().then( () => {
Splashscreen.hide();
} );

Try this:

https://forum.ionicframework.com/t/rc4-seems-slower-to-load-the-app/73495/2

I built with commands:
ionic build android --prod --release (3,25 MB file, 3s startup time)
ionic build android --release (4,15 MB file, 12s startup time)

Ionic2 rc.4

10 Likes

Helpful info to build ionic apps!
I get similar results:

ionic run android (14s startup time)
ionic run android --prod (7s startup time)

However, what should I do when using Ionic Cloud to package the app? Doesn’t seem to matter what tags I add to the command, the boot time is about 14s. I’ve tried both:

ionic package build android --release --profile profilename
ionic package build android --prod --release --profile profilename

I would assume --release automatically meant using AoT and minification, but performance seems to indicate neither are being used.

3 Likes

Where is this documented? Having a hard time keeping up …
UPDATE: Found it here https://github.com/driftyco/ionic-app-scripts/releases/tag/v0.0.47

Was having a horrible ~25s boot time for our app until I tried appending --prod, as was sugested. It cut down the starting time by half! It’s still a lot (~12s) but way faster compared to what it was.
That said, another of our apps did not see any sort of improvement and remained at its original time.
My guess is that it highly depends on the amount of things that can be safely “cut” during production.

Error while using --prod

ionic run android --prod

ionic-hello-world@ ionic:build D:\AraIonicApp
ionic-app-scripts build “–prod”
[10:40:28] ionic-app-scripts 1.0.0
[10:40:28] build prod started …
[10:40:29] clean started …
[10:40:29] clean finished in 15 ms
[10:40:29] copy started …
[10:40:29] ngc started …
[10:40:34] build prod failed: Error encountered resolving symbol values statically. Function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function (position 94:19 in the
original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts
[10:40:34] ionic-app-script task: “build”
[10:40:34] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider
replacing the function or lambda with a reference to an exported function (position 94:19 in the original
.ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts
Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exporte
d function (position 94:19 in the original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts
at positionalError (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:595:18)
at simplifyInContext (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:473:27)
at StaticReflector.simplify (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:478:22)
at StaticReflector.annotations (D:\AraIonicApp\node_modules@angular\compiler-cli\src\static_reflector.js:60:36)
at NgModuleResolver.resolve (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:14261:46)
at CompileMetadataResolver.loadNgModuleMetadata (D:\AraIonicApp\nodemodules@angular\compiler\bundles\compiler.umd.js:14646:45)
at CompileMetadataResolver.getUnloadedNgModuleMetadata (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:14636:23)
at addNgModule (D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:12944:43)
at D:\AraIonicApp\node_modules@angular\compiler\bundles\compiler.umd.js:12957:16
at Array.forEach (native)

npm ERR! Windows_NT 6.2.9200
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Users\om\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js” “run” “ionic:build” “–” "–prod"
npm ERR! node v6.9.1
npm ERR! npm v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:build: ionic-app-scripts build "–prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script ‘ionic-app-scripts build “–prod”’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "–prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\AraIonicApp\npm-debug.log

why am i getting this error

Below is my Module.ts file
FEW PAGE IMPORTS NOT COPIED HERE

import { NgModule, ErrorHandler } from ‘@angular/core’;
import { RequestOptions, XHRBackend } from ‘@angular/http’;
import { IonicApp, IonicModule, IonicErrorHandler ,InfiniteScroll} from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
// import { HttpModule} from ‘@angular/http’;

import {Storage} from ‘@ionic/storage’;

import { Focuser } from ‘…/components/focuser/focuser’;

@NgModule({
declarations: [
MyApp,
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Storage, {
provide: HttpInterceptor,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpInterceptor(backend, options);
},
deps: [XHRBackend, RequestOptions]
}]
})
export class AppModule {}