Ionic 2 speed up boot time?

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 {}

I have the same Error while using --prod

@ourarash it looks like you are on Windows. Try adding a -- between the cli command and the flags such as

ionic build android -- --prod

@maninak this is the error that I’m getting:

ionic-app-scripts build "--" "--prod"

[21:26:25]  ionic-app-scripts 1.0.0
[21:26:25]  build prod started ...
[21:26:25]  clean started ...
[21:26:26]  clean finished in 24 ms
[21:26:26]  copy started ...
[21:26:26]  ngc started ...
[21:26:31]  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 117:25 in the
            original .ts file), resolving symbol AppModule in
            src/app/app.module.ts

In ngc mode, check that if all ts components to be registered in app.moudle.ts

About boot time, I already posted it in another topic of the forum, but since it’s also the main subject here…have you seen the last Ionic entry :slight_smile:

http://blog.ionic.io/help-us-test-ionic-native-3-x/

3 Likes

Hi guys… I have the same issue here… At first when the flag this came --prod I build the apk with it and it reduced the boot time to 2 - 3 seconds. but now after working on the app, pages increased , animations , some plugins… the load time increased again, after the splashscreen it take 9 seconds to load.

Someone please suggest what can I do to improve this… what kind of tests to run ? Or if there is a way to drastically reduce the boot time…

ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v7.2.1
Xcode version: Not installed

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.jobsaf211675" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Af</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
    <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
    <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
    <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
    <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
    <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
    <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
    <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
    <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
    <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
    <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
    <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
    <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
    <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
    <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
    <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
    <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
    <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
    <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <icon height="57" src="resources/ios/icon/icon.png" width="57" />
    <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
    <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
    <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
    <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
    <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
    <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
    <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
    <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
    <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
    <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
    <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
    <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
    <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
    <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
    <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
    <icon height="99" src="resources/wp8/icon/ApplicationIcon.png" width="99" />
    <icon height="159" src="resources/wp8/icon/Background.png" width="159" />
    <splash height="1280" src="resources/wp8/splash/SplashScreenImage.png" width="768" />
</platform>
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<plugin name="cordova-plugin-inappbrowser" spec="~1.4.0" />
<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
<plugin name="cordova-plugin-whitelist" spec="1.3.1" />
<plugin name="cordova-plugin-console" spec="1.0.5" />
<plugin name="cordova-plugin-statusbar" spec="2.2.1" />
<plugin name="cordova-plugin-device" spec="1.1.4" />
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
<engine name="ios" spec="4.3.1" />
<engine name="android" spec="6.1.0" />
<icon src="resources/android/icon/drawable-xhdpi-icon.png" />
<plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
    <variable name="XWALK_VERSION" value="22+" />
    <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
    <variable name="XWALK_MODE" value="embedded" />
    <variable name="XWALK_MULTIPLEAPK" value="true" />
</plugin>
<plugin name="cordova-plugin-wkwebview-engine" spec="https://github.com/driftyco/cordova-plugin-wkwebview-engine.git" />

package.json:

{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"config": {
  "ionic_copy": "./config/copy.config.js",
  "ionic_sass": "./config/sass.config.js",
  "custom_icons": "./config/custom-icons.config.js"
},
"scripts": {
  "ionic2-custom-icons": "ionic2-custom-icons",
  "build:before": "ionic2-custom-icons",
  "serve:before": "ionic2-custom-icons",
  "ionic:build": "ionic-app-scripts build",
  "ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
  "@angular/common": "2.2.1",
  "@angular/compiler": "2.2.1",
  "@angular/compiler-cli": "2.2.1",
  "@angular/core": "2.2.1",
  "@angular/forms": "2.2.1",
  "@angular/http": "2.2.1",
  "@angular/platform-browser": "2.2.1",
  "@angular/platform-browser-dynamic": "2.2.1",
  "@angular/platform-server": "2.2.1",
  "@ionic/cloud-angular": "^0.9.1",
  "@ionic/storage": "1.1.7",
  "ionic-angular": "2.0.1",
  "ionic-native": "2.5.1",
  "ionic-shrinkage": "0.0.1",
  "ionic2-custom-icons": "^0.3.1",
  "ionicons": "3.0.0",
  " rxjs": "5.0.0-beta.12",
  "sw-toolbox": "3.4.0",
  "zone.js": "0.6.26"
},
"devDependencies": {
  "@ionic/app-scripts": "1.0.0",
  "typescript": "2.0.9"
},
"cordovaPlugins": [
  "cordova-plugin-whitelist",
  "cordova-plugin-statusbar",
  "cordova-plugin-console",
  "cordova-plugin-device",
  "ionic-plugin-keyboard",
  "cordova-plugin-splashscreen",
  "cordova-plugin-contacts",
  "cordova-plugin-compat",
  "cordova-plugin-network-information",
  "com.telerik.plugins.nativepagetransitions",
  "cordova-plugin-crosswalk-webview",
  "cordova-plugin-inappbrowser"
],
1 Like

I am having the same issue with almost 25 sec startup time.No changes even after appending --prod . It will be very difficult to launch the app in production with such startup time . :confused:
Ionic team really need to look into this !!

1 Like

I think that issue beside of bundle size is missing of lazy loading in ionic navigation. NG2 router plays very well with lazy loading including multiple strategies so I’m under impression that Ionic must move their NAV to NG2 router ASAP.

Lazy loading allows to load only first view and rest of them asynchronously in background. That way no matter of bundle size it will boot up really fast.

2 Likes

I second that. Angular’s modularization and lazy (or pre-) loading of components helps a lot in boot load times.

Read this article explaining the tech a bit, for reference: https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb

I’m pretty sure the Ionic team is well aware of such missing performance features (same with the fonts issue and others) but kinda pushed for release anyway. Bad call IMHO since Ionic 2 seems (and honestly is) underperforming heavily compared to what it can be with the ready-to-grab optimizations.

1 Like