Issue with app boot time

First he spoke about your building tools which are not up-to-date (cordova, ionic cli, app-scripts).

Then that’s kind of weird that you can’t upgrade from 2.2.0 to 3 without problems. Libraries changed but everything is retro-compatible

Updating the environment (Ionic CLI, app-scripts, Cordova) just makes sure there is no “cruft” hanging you down. Especially upgrading Ionic CLI will also give better ionic info output we can use to diagnose your problems.

If you do not want to upgrade Ionic (ionic-angular) itself I completely understand - but this will be the biggest lever you can use to improve the boot time. But as I wrote, start with the environment stuff first and stay with ionic-angular 2.2.0.

Hi, i have a 3 secs boot time and ill tell you what i recommend to you (the same i have).

First of all, i recommend to try always get the latest version of ionic-angular (3.4.2 in this case), then you can configure your splash screen like this:

<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashScreenDelay" value="10000" />
<preference name="FadeSplashScreenDuration" value="1000" />  
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />

Then in your app.component add this:

this.splashScreen.hide();

After platform ready I have to say that i only have the default ones (console, device, splashscreen, statusbar, whitelist) adn this are the version:

<plugin name="cordova-plugin-console" spec="~1.0.4"/>
<plugin name="cordova-plugin-device" spec="~1.1.3"/>
<plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
<plugin name="cordova-plugin-statusbar" spec="~2.2.0"/>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0"/>

Other thing to keep in mind is always try to get the latest android, ios platform too.

Hope this can help you :blush: :blush:

1 Like

@Sujan12 and @reedrichards Please check:

Ionic Info:

[tushar@tushar-angularjs Parent (copy)]$ ionic info

global packages:

    @ionic/cli-plugin-proxy : 1.3.2
    @ionic/cli-utils        : 1.5.0
    Cordova CLI             : 7.0.1 
    Ionic CLI               : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.0
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.1.2 browser 4.1.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.10.3
    OS         : Linux 4.9
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10 

Package.json:

{
    "name": "Yugma-Parent",
    "author": "NxtLife Team",
    "homepage": "http://www.nxtlifetechnologies.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "postinstall": "typings install"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/platform-server": "2.2.1",
        "@ionic-native/camera": "^3.14.0",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/file": "^3.4.4",
        "@ionic-native/file-chooser": "^3.4.4",
        "@ionic-native/keyboard": "^3.6.1",
        "@ionic-native/splash-screen": "^3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic-native/transfer": "^3.4.4",
        "@ionic/storage": "2.0.1",
        "angular2-moment": "^1.0.0-beta.rc.1",
        "intl": "^1.2.5",
        "ionic-angular": "3.5.0",
        "ionic-gallery-modal": "^0.1.1",
        "ionic-native": "2.2.3",
        "ionic2-calendar": "^0.2.4",
        "ionic2-rating": "0.0.12",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "typings": "1.3.1",
        "underscore": "^1.8.3",
        "zone.js": "0.8.12",
        "com.megster.cordova.FileChooser": "http://github.com/don/cordova-filechooser.git",
        "cordova-plugin-camera": "~2.4.0",
        "cordova-plugin-file": "~4.3.2",
        "cordova-plugin-file-transfer": "~1.6.2",
        "cordova-plugin-splashscreen": "~4.0.2",
        "cordova-plugin-whitelist": "~1.3.2",
        "ionic-plugin-keyboard": "~2.2.1",
        "phonegap-plugin-push": "1.8.2"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.0",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-whitelist",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [
        "ios",
        {
            "platform": "ios",
            "version": "",
            "locator": "ios"
        }
    ],
    "description": "Yugma is a school quality management App for schools and provides a better interface between parent and teachers.",
    "cordova": {
        "plugins": {
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-camera": {},
            "com.megster.cordova.FileChooser": {},
            "cordova-plugin-file": {},
            "cordova-plugin-file-transfer": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "phonegap-plugin-push": {
                "SENDER_ID": "562555006958"
            }
        }
    }
}

Config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.demo.test" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Yugma-Parent</name>
    <description>Yugma is a school quality management App for schools and provides a better interface between parent and teachers.
  </description>
    <author email="test@gmail.com" href="http://www.nxtlifetechnologies.com/">
    NxtLife 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:*" />
        <preference name="android-targetSdkVersion" value="23" />
        <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="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" />
    </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>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="android-targetSdkVersion" value="23" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="orientation" value="portrait" />
    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" />
    <allow-navigation href="http://192.168.0.21:8100" />
    <plugin name="com.megster.cordova.FileChooser" spec="http://github.com/don/cordova-filechooser.git" />
    <plugin name="cordova-plugin-camera" spec="~2.4.0" />
    <plugin name="cordova-plugin-file" spec="~4.3.2" />
    <plugin name="cordova-plugin-file-transfer" spec="~1.6.2" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.2" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.2" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="phonegap-plugin-push" spec="1.8.2">
        <variable name="SENDER_ID" value="************" />
    </plugin>
</widget>

And i just build apk using ionic cordova build android --prod and it takes 13 seconds.
Now what should i do ???

Thank you

@fdom Please check:

Ionic Info:

[tushar@tushar-angularjs Parent (copy)]$ ionic info

global packages:

    @ionic/cli-plugin-proxy : 1.3.2
    @ionic/cli-utils        : 1.5.0
    Cordova CLI             : 7.0.1 
    Ionic CLI               : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.0
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.1.2 browser 4.1.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.10.3
    OS         : Linux 4.9
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10 

Package.json:

{
    "name": "Yugma-Parent",
    "author": "NxtLife Team",
    "homepage": "http://www.nxtlifetechnologies.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "postinstall": "typings install"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/platform-server": "2.2.1",
        "@ionic-native/camera": "^3.14.0",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/file": "^3.4.4",
        "@ionic-native/file-chooser": "^3.4.4",
        "@ionic-native/keyboard": "^3.6.1",
        "@ionic-native/splash-screen": "^3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic-native/transfer": "^3.4.4",
        "@ionic/storage": "2.0.1",
        "angular2-moment": "^1.0.0-beta.rc.1",
        "intl": "^1.2.5",
        "ionic-angular": "3.5.0",
        "ionic-gallery-modal": "^0.1.1",
        "ionic-native": "2.2.3",
        "ionic2-calendar": "^0.2.4",
        "ionic2-rating": "0.0.12",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "typings": "1.3.1",
        "underscore": "^1.8.3",
        "zone.js": "0.8.12",
        "com.megster.cordova.FileChooser": "http://github.com/don/cordova-filechooser.git",
        "cordova-plugin-camera": "~2.4.0",
        "cordova-plugin-file": "~4.3.2",
        "cordova-plugin-file-transfer": "~1.6.2",
        "cordova-plugin-splashscreen": "~4.0.2",
        "cordova-plugin-whitelist": "~1.3.2",
        "ionic-plugin-keyboard": "~2.2.1",
        "phonegap-plugin-push": "1.8.2"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.0",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-whitelist",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [
        "ios",
        {
            "platform": "ios",
            "version": "",
            "locator": "ios"
        }
    ],
    "description": "Yugma is a school quality management App for schools and provides a better interface between parent and teachers.",
    "cordova": {
        "plugins": {
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-camera": {},
            "com.megster.cordova.FileChooser": {},
            "cordova-plugin-file": {},
            "cordova-plugin-file-transfer": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "phonegap-plugin-push": {
                "SENDER_ID": "562555006958"
            }
        }
    }
}

Config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.demo.test" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Yugma-Parent</name>
    <description>Yugma is a school quality management App for schools and provides a better interface between parent and teachers.
  </description>
    <author email="test@gmail.com" href="http://www.nxtlifetechnologies.com/">
    NxtLife 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:*" />
        <preference name="android-targetSdkVersion" value="23" />
        <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="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" />
    </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>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="android-targetSdkVersion" value="23" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="orientation" value="portrait" />
    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" />
    <allow-navigation href="http://192.168.0.21:8100" />
    <plugin name="com.megster.cordova.FileChooser" spec="http://github.com/don/cordova-filechooser.git" />
    <plugin name="cordova-plugin-camera" spec="~2.4.0" />
    <plugin name="cordova-plugin-file" spec="~4.3.2" />
    <plugin name="cordova-plugin-file-transfer" spec="~1.6.2" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.2" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.2" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="phonegap-plugin-push" spec="1.8.2">
        <variable name="SENDER_ID" value="************" />
    </plugin>
</widget>

And i just build apk using ionic cordova build android --prod and it takes 13 seconds.
Now what should i do ???

Thank you

So upgrading was no problem at all and boot time is already down to 13 seconds?
Congratulations! That is awesome.
What work was needed for the upgrade?

Did you already implement any lazy loading?

1 Like

@Sujan12 I just follow Ionic2 to Ionic3 link and updates my code according to that. and its working fine.

Before that i uninstall ionic v2.2.0 and run npm install ionic cordova -g and also update node and npm version.

It’s update ionic, ionic cli, app-script and cordova globally in my system.

Thank you @Sujan12, @reedrichards and @fdom.

I am too much happy :innocent: but still worrying about 13 seconds :slight_smile:

I am going to follow Lazy Loading link. Should I do it or not? And if I do it what will be the benifit of it? If you have any other link or resources to achieve lazy loading for the quick boot time?

Please help me out in this issue as I am stuck since long. Thanks a lot.

2 Likes

@Dhyanandra cool to hear your app boot fast, but still, I’m agree, 13 seconds is a lot

About lazy loading, if you use the same components in many pages, I would advice, but that’s my point of view, not to use lazy loading. Right now, in such a cases, the code gonna be included multiple times in the build which could have some side effect and gonna increase the size of the built app.

If you don’t use components or don’t use the same components in my pages, yep why not using lazy loading.

But if I was you, first, I would search deeper where are these 13 seconds consumed. Had you have a look to your Xcode logs? How much time does it take till you see the entry “Device Ready” in the logs?

wow sounds a great improve but still little slowly (13 secs) so try to copy my config.xml attributes for the splashscreen in your config.xml and override yours.

Im not using lazy loading and my app boot time is around 3secs, maybe cause you have more plugins :thinking:

Try changing the config.xml file and then use lazy loading and share results :blush:

8 posts were split to a new topic: Splash screen: 2 to 3 seconds. white screen: 10 seconds

Now you have a base to work with.

  1. I would create a super simple project with ionic start blank blank, build it with --prod and run that on the device you are testing on - that is your base line.

  2. Then see what you can (temporarily) remove from your app that could take time to start: Cordova plugins, Ionic Native plugins, any library or component. Measure which one improves the loading time how much.

  3. Play with lazy loading. There are also two blog posts about it: http://blog.ionic.io/ionic-and-lazy-loading-pt-1/ + http://blog.ionic.io/ionic-and-lazy-loading-pt-2/ Measure the time, but also keep an eye on the file size as @reedrichards mentioned.

1 Like

@Sujan12 Ionic 3’s lazy loading is bad for large apps

Random blog post on the internet, has to be true :wink:
Seriously: Find out if it works for you.

@Sujan12, @fdom and @reedrichards Please have a llok below screenshots.

I clone a fresh ionic repo using ionic start super --type=ionic-angular command.

It’s run successfully in my system and i also try to build release apk. It’s Strange it takes > 30 sec to boot app. :tired_face:

when i check inside network tabs i found something: please check vendor.js and load time also:

Here is my package.json (provided by ionic):

{
    "name": "tabs",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/camera": "3.12.1",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/google-maps": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "6.0.1",
        "@ngx-translate/http-loader": "0.0.3",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.5.3",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.2",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

In short i haven’t change anything that is provided by ionic team although, why it takes too much time ?:scream:

I guess the repo isn’t up-to-date. Check changelog 3.5.2 and add vendor.js to the index.html

This is a starter that shows a lot of functionality, and is in no way optimized to be fast.
It is also not using Lazy loading for now by the way.

Test this with the blank starter to get the baseline relevant to your system.

Once again,

After achieving lazy loading using ionic3 everything is working fine :slight_smile: but i saw that there is some component taking small time to initialize it self. during that time app shows blank/white screen or it renders automatically to rootpage for small time and after that it navigates properly. :rage: We don’t expect this things after migrate 10-12 app modules to IonicPage. If You have any suggestion please guide me.

And yes also facing issue with ion-icon and menuToggle while using preloading Concept of IonicPage. If i solve this issue i say that , now my app is ready for production mode.

Example Here:

<ion-header>
  <ion-navbar color="primary">
    <ion-toolbar>
      <ion-buttons start>
        <button ion-button menuToggle>
          <ion-icon name="ios-menu"></ion-icon>
        </button>
      </ion-buttons>
      <ion-title >
        <span>{{viewTitle | uppercase}}</span>
      </ion-title>
      <ion-buttons end>
        <button clear ion-button>
          <ion-icon name="ios-clock-outline" (click)="openTimelineModal()" style="font-size: 1.8em;color:white"></ion-icon>
        </button>
      </ion-buttons>
    </ion-toolbar>
  </ion-navbar>
</ion-header>

If i used menuToggle with button element. It doesn’t show toggle button in header.
but if i remove menuToggle from button element it shows button but as we expect it wont works.

Facing same issue

Please open a new topic for your other issues that don’t concern boot time. Thanks.

just try to run:

ionic cordova build android --prod --release

It will build/clean the app for production and the app will start much faster.

2 Likes

Bro are you fix the blank/white screen issue after load splash i have got same issue my app load time is 8 to 11 sec max but while screen show for few seconds are you fix it?