Ionic 2 speed up boot time?

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

I have done “ionic run ios --prod --release” and it has reduced my boot time from 8 seconds to 3 seconds, when measured using wall clock (without any code change). I am trying to squeeze out a few more miliseconds, if possible.

Question:
Angular’s AOT workflow requires that we replace this call
--> platformBrowserDynamic().bootstrapModule(AppModule);
with this call
--> platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory);
in order to take advantage of AOT class factories.

I did not do this in my “ionic run ios --prod --release” run. Does this command automatically insert/replace the call? Or is it still using bootstrapModule(AppModule)?

I did call enableProdMode() though.

Short answer: yes. Longer answer: see the app-scripts source, specifically the replaceBootstrap stuff.

how??
my ionic build android --prod
not working it shows only white screen
but ionic build android
will take 30sec for booting

1 Like

when you run ionic build android --prod, check the build logs, did you see any errors?
white screen on a real device or in simulator?

Failed to load resource: net::ERR_FILE_NOT_FOUND
cordova.js:107 Uncaught Error: cordova already defined
main.js:7 Uncaught Error: Cannot find module "./app.module.ngfactory

Mmmm never had this error. Did you maybe imported cordova manually in your index.html?

See http://stackoverflow.com/questions/20890263/error-in-phonegap-application-uncaught-module-cordova-plugin-list-already-defin

Try removing and adding platforms, and try to build for the --prod release, this has solved my issues,
Same thing has fixed my other booting issues
ex: ionic platform remove android, ionic platform add android

I’m building my app with production and release mode, it takes 5 seconds to start, that’s nice, but there’s how to reduce this time? 2 seconds would be great :smiley:

1 Like

5 seconds isn’t bad, well done :wink:

I guess to reduce it you will have to wait for Ionic 3 and the possibility to lazy load pages.

In the meantime I wrote a post about the current status of the load time, if you’ve got any inputs about how to speed up now you’re most welcomed

Did you ever figured out how to speed up Ionic Cloud Package?

I might try foregoing ionic package build --prod --release and do the pure ionic build --prod --release and sign the .apk manually. Have you made progress in this regard?

Edit: Somehow it all works now. The exact command I use is: ionic package build android --prod --profile my_profile --release.

I could not get --prod to work on local build, however. But since you get 100 free builds per month with Ionic Package, I’m gonna stick with it.

Edit 2: I literally tried the same exact command 2 days after and it, once again, is not compressed. What the heck? I can tell the bootup time will be terrible based on the file size.

I’m just using --release now. Think upgrading to the latest Ionic version fixed the issue for me. (We’re on 2.0.1 now)

you need to add import { enableProdMode } from ‘@angular/core’; to your main.ts file as well as enableProdMode(); directly above the bootstrap line. Also when you build add --prod so for instance ‘ionic build ios --prod’

No you don’t. app-scripts takes care of all this.

mainly using the --prod when building is what solved my problem. That line just makes the console warning go away and speeds up time during development.

1 Like