Closed Tusharbalar closed 7 years ago
Have you try to build your application in production mode ?
ionic-app-scripts build --prod
Sir we use ionic build android --prod command to generate android app
There is two build to build an application in production:
ionic-app-scripts build --prod
ionic build android --release
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.
@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 !!!
Have you defined custom colors?
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.
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/
@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
@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.
Did you try commenting out your custom color changes? What was the outcome?
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!
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
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:
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.
@peterkelly Thank you for suggesting Chrome's profiling tools. following screenshot shows my profiling result:
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:
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.
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.
I have the same problem
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
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.
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
Other information:
stackoverflow link
Ionic info: