Ionic 3 first time load

Ionic Framework ionic-v3
1

I had developed an app in ionic 2. This has initial load time 6 to 30 seconds. And bundle size of android apk is 8 MB. Then ionic 3 comes with lazy load. I converted my whole app from ionic 2 to ionic 3 with lazy load. But still apk size & load time have no effect.
Apk size is not that important to me but I want to improve the loading time.
So some quick questions:

  1. What happens between platform.ready and first page load? Why a blank white screen? I know it can be replaced with splash screen but I want to know what is happening at that time.

  2. Generated bundle (apk or ipa) contains all the code already, then what lazy load is doing?

  3. Splash screen comes with a spinner. Can I add some text below spinner which tell user that we are configuring your app?

Thanks

2

I don’t exactly have answers to your questions but are you sure youre using lazy loading correctly? It won’t make your application 1 million times faster though. But it should improve it somewhat.

You could always add some text to your splash screen image, not that elegant.

3

Tell us more about your app. How many pages? What is on those pages?
How do you build your app? Which platforms?
Where and how do you test your app?

4

@Sujan12
It’s an Ecommerce app with 20 pages.Page content ranges from large product list to small about page.

I build android using ionic build android --prod – release. Then signed it using jarsigner->zipalign.

Load time is observed by my team & also reported by our beta testers. I also used chrome inspector to see it.

@philipgriffin I did it all right. Can you tell how can I show text at splash?

5

I’m simply saying you could add text to the splash screen image. You take your image and literally put text on it.

6

Post your ionic info output and package.json content please.
How big is your www folder?

7

Ionic info:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.1 Build version 8E1000a

Package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "4.0.0",
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@ionic-native/call-number": "3.8.0",
    "@ionic-native/core": "^3.10.3",
    "@ionic-native/device": "3.8.0",
    "@ionic-native/email-composer": "^3.12.1",
    "@ionic-native/facebook": "^3.10.3",
    "@ionic-native/file": "^3.14.0",
    "@ionic-native/geolocation": "3.8.0",
    "@ionic-native/google-analytics": "^3.11.0",
    "@ionic-native/google-plus": "^3.10.3",
    "@ionic-native/social-sharing": "3.8.0",
    "@ionic-native/splash-screen": "^3.9.2",
    "@ionic-native/status-bar": "^3.10.3",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic/cloud-angular": "^0.12.1-beta.1",
    "@ionic/storage": "^2.0.1",
    "font-awesome": "4.7.0",
    "ionic-angular": "3.0.1",
    "ionic-image-loader": "^3.2.1",
    "ionicons": "3.0.0",
    "jssha": "2.2.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "@types/jssha": "0.0.29",
    "@types/node": "7.0.13",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "description": "Ionic"
}

Compressed size of www folder is 7 MB.

8

First I would try to upgrade these to recent versions:

Next, do you really need all those @ionic-native packages? You don’t seem to have the Cordova plugins installed (or they may not be shown here because you are using the old Cordova… - post your config.xml as well please.)

What exactly are you using

for?

9

Config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.apiapp829370" version="0.0.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <description>App Desc</description>
    <author email="devme@gmail.com" href="http://www.ionicframework.com/">Vivek</author>
    <content src="index.html" />
    <access origin="*" />
    <access launch-external="true" origin="mailto:*" />
    <access launch-external="true" origin="tel:*" />
    <access origin="*.pushwoosh.com" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-navigation href="http://192.168.0.122:8100" />
    <allow-navigation href="http://192.168.0.118:8100" />
    <allow-navigation href="http://192.168.0.124:8100" />
    <allow-navigation href="http://192.168.0.116:8100" />
    <allow-navigation href="http://192.168.43.89:8100" />
    <allow-navigation href="http://192.168.0.117:8100" />
    <allow-navigation href="http://192.168.0.108:8100" />
    <allow-navigation href="*" />
    <allow-navigation href="http://192.168.1.109:8100" />
    <allow-navigation href="http://192.168.1.110:8100" />
    <allow-navigation href="https://itunes.apple.com" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="*" />
    <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" />
        <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:*" />
        <allow-navigation href="mailto:*" />
        <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="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="android-targetSdkVersion" value="23" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="orientation" value="portrait" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="AndroidLaunchMode" value="singleTop" />
    <preference name="SplashScreenDelay" value="30000" />
    <!-- <preference name="ShowSplashScreen" value="false"/> -->
    <preference name="loadUrlTimeoutValue" value="700000" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <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-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-plugin-device" spec="~1.1.4" />
    <plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
    <plugin name="cordova-sqlite-storage" spec="~2.0.2" />
    <plugin name="ionic-plugin-deploy" spec="~0.6.7" />
    <!-- <plugin name="phonegap-plugin-push" spec="~1.10.4">
        <variable name="SENDER_ID" value="XXXXXXXXX" />
    </plugin> -->
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" />
    <plugin name="cordova-plugin-file" spec="~4.3.3" />
    <plugin name="cordova-plugin-file-transfer" spec="~1.6.3" />
</widget>

I am using cloud-angular for ionic live deploy (https://docs.ionic.io/setup.html#installation)

10

Get rid of those, they are from livereload testing locally.

Also get rid of the ionic-native stuff you are not using. That should make the app a bit smaller and faster.

Did you check if your app actually is lazy loaded? What is in /www/build?