search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.03k stars 13.51k forks source link

Ionic2 takes almost 30 sec to load app #12305

Closed Tusharbalar closed 7 years ago

Tusharbalar commented 7 years ago

Ionic version: 2.2.0

Current behavior: Using ionic2 and angular2 we build almost 13-14 small features/module. I dont understand why my app takes too much time to hide splashscreen/load app.

Hello everyone, after frustrating too much to find solutions how to decrease time to load app

Expected behavior: It takes maximum 4-5 seconds to hide splashscreen and load module perfectly.

Package.json

{
  "name": "Yugma-Management",
  "author": "NxtLife Team",
  "homepage": "http://www.nxtlifetechnologies.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build",
    "postinstall": "typings install"
  },
  "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-native/camera": "^3.4.4",
    "@ionic-native/core": "^3.1.0",
    "@ionic-native/file": "^3.4.4",
    "@ionic-native/file-chooser": "^3.4.4",
    "@ionic-native/transfer": "^3.4.4",
    "angular2-moment": "^1.0.0-beta.rc.1",
    "intl": "^1.2.5",
    "ionic-angular": "2.2.0",
    "ionic-gallery-modal": "^0.1.1",
    "ionic-native": "^2.2.3",
    "ionic2-calendar": "^0.2.4",
    "ionic2-rating": "0.0.10",
    "ionicons": "3.0.0",
    "nxtlife-ionic2-rating": "^1.0.3",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "typings": "1.3.1",
    "underscore": "^1.8.3",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.1.4",
    "typescript": "2.0.6"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen"
  ],
  "cordovaPlatforms": [],
  "description": "NxtLifeYugma2: An Ionic project"
}

Other information:

stackoverflow link

Ionic info: 

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.9
Node Version: v6.10.3
Xcode version: Not installed
5im0n commented 7 years ago

Have you try to build your application in production mode ?

ionic-app-scripts build --prod

Tusharbalar commented 7 years ago

Sir we use ionic build android --prod command to generate android app

5im0n commented 7 years ago

There is two build to build an application in production:

  1. The first is made by app-scripts ionic-app-scripts build --prod
  2. The second is made by Cordova to build the app on a platform. ionic build android --release
jgw96 commented 7 years ago

Hello, all! So just to clear up how to do a production build, the correct command to run for a production, ready for the Play store apk with the latest cli is to run ionic cordova build android --prod --release. Now on to the core issue here of the long load time. Would you mind posting the repo for your app here? I want to see how big the bundles are in the app and analyze them for what is causing the large code size.

Tusharbalar commented 7 years ago

@jgw96 I have a private repository, so I will need to give us the access, can you please provide your user details so that I can do the needful. Thanks in advance !!!

PurpleEdge2214 commented 7 years ago

Have you defined custom colors?

https://forum.ionicframework.com/t/ionic2-app-show-blank-screen-on-android-device-4-4-4-after-splash-screen/81118/21

Tusharbalar commented 7 years ago

We just override default color like:

$colors: (
  primary:    #00BCD4,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #fff,
  dark:       #222,
  cool:       #607D8B,
  fab:        #3e9e3e,
  header:     #387ef5,
  color1:     #00bcd4,
  colorLight: #80deea,
  transparent: rgba(0, 0, 0, 0),
  csStripColor:#797d80
);

and just create over own color that is used in our app.

$color0 :       #fd4544;
$color1 :       #00BCD4;
$csPink:        #f6c2d8;
$csDarkPink:    #d35a7b;
$colorLight:    #00acc1;
$dim:           #dddddd;
$csBlue:        #37cbff;
$csGreen:       #47c947;

I follow your docs which you are provided but i don't think so that is the correct solutions.

peterkelly commented 7 years ago

I recommend using Chrome's profiling tools to see where your app is spending its time during startup:

https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

tattivitorino commented 7 years ago

@Tusharbalar I have an app that was taking almost 20 secs to boot and that was getting me crazy! I took some time and updated everything! I can see in you package.json that maybe you're a bit outdated on Ionic and Angular! My sugestion is, update Ionic, Ionic CLI, create a new blank project, add your plugins again (the latest versions) and also the @ionic-native related packages, move all the content from your current src folder to the new one, test for errors with ionic serve and build again! This solved my problem like a charm! It reduced even in dev mode the boot from 20 to 12 secs and in prod it takes 2 secs tops! I hope it helps you the same way it helped me! cheers

Tusharbalar commented 7 years ago

@tattivitorino ionic forum i have followed the link above migrated from ionic version 2.2.0 to latest ionic and the boot time of the app has been reduced to 13-15 seconds (which again depends on the mobile phone used to boot it.) But still unable to understand why this is happening as it should take approx 3-5 second.

Here is my latest info:

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       : v8.1.3
    OS         : Linux 4.9
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

Package.json:

{
    "name": "Yugma",
    "author": "NxtLife Team",
    "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": "************"
            }
        }
    }
}

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</name>
    <description>Yugma is a school quality management App for schools and provides a better interface between parent and teachers.
  </description>
    <author email="info@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>

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.

PurpleEdge2214 commented 7 years ago

Did you try commenting out your custom color changes? What was the outcome?

jgw96 commented 7 years ago

Hello all! I am going to close this issue by pointing to this comment. While that is an old comment, it is still very much valid. We are hard at work on reducing load time for ionic apps. In fact, it is our main priority by a long shot above everything else. We are working on some very exciting things internally that should finally solve this issue. Thanks for using Ionic!

Tusharbalar commented 7 years ago

Hey @jgw96 as you told me

I want to see how big the bundles are in the app and analyze them for what is causing the large code size.

forget about my code and i create a fresh repo using ionic start super --type=ionic-angular command.

ionic info:

tushar@localhost:~/workspace3/tabs$ ionic info

global packages:

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

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.1
    OS         : Linux 4.11
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10

You can see here

Is takes >30 sec to boot app after installing release app in my mobile.

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

screenshot

I haven't change in your code and package.json file also.

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

I think you guys need to work on it properly.

SidMorad commented 7 years ago

@peterkelly Thank you for suggesting Chrome's profiling tools. following screenshot shows my profiling result: ioincappboottimeprofiledscreenshot

As you can see majority of spent time happens in Evaluate Script(main.js:1). I am quite new to this profiling tool, would you please guide me to investigate deeper on this? I just want to make sure I am not doing something wrong in my code. thanks.

Some more info that might help: ionic cordova run android --prod executed before running chrome's profiler. Ionic info:

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0
    @ionic/cli-plugin-ionic-angular : 1.4.0
    @ionic/cli-utils                : 1.6.0
    ionic (Ionic CLI)               : 3.6.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.1.1
    Node              : v6.9.5
    OS                : Linux 4.4
    npm               : 4.6.1

And here is my saved timeline data:

IonicApp-TimelineRawData-20170731T155138.json.zip

zhu04303661 commented 7 years ago

Hello @jgw96 is there any progress with this issue? or you can tell me some work around way? because this issue ie really a block issue for our web site user. now my vendor.js size is almost 5.2M, and the first page load almost 1.3min when user inviting.

We are looking forward to your reply, thank a lot.

SidMorad commented 7 years ago

Hello all! I am going to close this issue by pointing to this comment. While that is an old comment, it is still very much valid. We are hard at work on reducing load time for ionic apps. In fact, it is our main priority by a long shot above everything else. We are working on some very exciting things internally that should finally solve this issue. Thanks for using Ionic!

@jgw96 my vendor.js is about 2.5M and my app's boot time is about ~12 seconds. vendor.js size in ionic-conference-app is about 796 KB and it's boot time is about ~8 seconds

So by taking @zhu04303661 statistics into account, can we conclude by increasing vendor.js size boot time will increase accordingly?

@ionic-team please let us know how can we follow your progress on this? and please let us know how can we provide more information/help if needed? thanks

p.s. This is a real showstopper! and I wish I knew about this limitation in advance.

fdambrosio commented 6 years ago

I have the same problem

fdambrosio commented 6 years ago

I've fixed using this environment: 

"dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/app-version": "4.3.3",
    "@ionic-native/core": "4.3.3",
    "@ionic-native/date-picker": "4.3.3",
    "@ionic-native/device": "4.3.3",
    "@ionic-native/google-analytics": "4.3.3",
    "@ionic-native/http": "4.3.3",
    "@ionic-native/media": "4.3.3",
    "@ionic-native/music-controls": "4.3.3",
    "@ionic-native/screen-orientation": "4.3.3",
    "@ionic-native/splash-screen": "4.3.3",
    "@ionic-native/status-bar": "4.3.3",

  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "@types/core-js": "^0.9.43",
    "typescript": "^2.4.2"
@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.3.0 ios 4.5.3
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2
ios-sim           : 6.1.2
Node              : v6.11.4
npm               : 5.5.1
OS                : macOS Sierra

ionic cordova build android --prod --release without issues on old android tablet the boot time is 4-5 seconds

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.