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
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
@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?
@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 but still worrying about 13 seconds
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.
@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
Try changing the config.xml file and then use lazy loading and share results
Now you have a base to work with.
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.
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.
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.
Random blog post on the internet, has to be true
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.
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 ?
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 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. 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.
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.
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?