Reduce boot time in ionic-2 app

I am new to ionic-2 project.I just want to know how to reduce boot time of app.Because after 3 sec of splash screen , it shows white screen and takes 16 sec to start.

I have the same problem. my app is around 8MB and i run on android@6.1 device it takes 9sec to load the app using --prod command. Is there any way to reduce to 1sec.

Please do suggest best practices.

Using ionic cordova:build ios --prod command, I am getting 13 seconds to load the app to reach home page. I am using BackgroundGeolocation and Geolocation initially.

some error

E:\io\Fanuc>ionic cordova:build android --prod
_ _
() ()


| |/ _ | '_ | |/ |
| | (_) | | | | | (

||___/|| |||___| CLI v2.2.1

Usage: ionic task args

=======================
cordova:build is not a valid task

Available tasks:
(use --help or -h for more info)

start … Starts a new Ionic project in the specified PATH
serve … Start a local development server for app dev/testing
setup … Configure the project with a build tool (beta)
generate … Generate pages and components
platform … Add platform target for building an Ionic app
run … Run an Ionic project on a connected device
emulate … Emulate an Ionic project on a simulator or emulator
build … Build (prepare + compile) an Ionic project for a given platform.

plugin … Add a Cordova plugin
resources … Automatically create icon and splash screen resources (beta)
Put your images in the ./resources directory, named splash or icon.
Accepted file types are .png, .ai, and .psd.
Icons should be 192x192 px without rounded corners.
Splashscreens should be 2208x2208 px, with the image centered in the middle.

upload … Upload an app to your Ionic account
share … Share an app with a client, co-worker, friend, or customer
lib … Gets Ionic library version or updates the Ionic library
login … Login to your Ionic account
io … Integrate your app with Ionic Cloud services
security … Store your app’s credentials for the Ionic Cloud
push … Upload APNS and GCM credentials to Ionic Push
package … Use Ionic Package to build your app
config … Set configuration variables for your ionic app
service … Add an Ionic service package and install any required plugins
add … Add an Ion, bower component, or addon to the project
remove … Remove an Ion, bower component, or addon from the project
list … List Ions, bower components, or addons in the project
info … List information about the users runtime environment
help … Provides help for a certain command
link … Sets your Ionic App ID for your project
hooks … Manage your Ionic Cordova hooks
state … Saves or restores state of your Ionic Application using the package.json file
docs … Opens up the documentation for Ionic

E:\io\Fanuc>

E:\io\Fanuc>ionic build android --prod

ionic-hello-world@ ionic:build E:\io\Fanuc
ionic-app-scripts build "--prod"

[09:17:04] ionic-app-scripts 1.1.0
[09:17:04] build prod started …
[09:17:04] clean started …
[09:17:04] clean finished in 2 ms
[09:17:04] copy started …
[09:17:04] ngc started …
[09:17:14] build prod failed: Error encountered resolving symbol values statically. Expression form not supported
(position 6:12 in the original .ts file), resolving symbol TabindexDirective in
E:/io/Fanuc/src/components/tabindex-directive/tabindex-directive.ts
[09:17:14] ionic-app-script task: “build”
[09:17:14] Error: Error encountered resolving symbol values statically. Expression form not supported (position 6:12 in
the original .ts file), resolving symbol TabindexDirective in
E:/io/Fanuc/src/components/tabindex-directive/tabindex-directive.ts
Error: Error encountered resolving symbol values statically. Expression form not supported (position 6:12 in the original .ts file), resolving symbol TabindexDirective in E:/io/Fanuc/src/components/tabindex-directive/tabindex-directive.ts
at positionalError (E:\io\Fanuc\node_modules@angular\compiler-cli\src\static_reflector.js:595:18)
at simplifyInContext (E:\io\Fanuc\node_modules@angular\compiler-cli\src\static_reflector.js:473:27)
at StaticReflector.simplify (E:\io\Fanuc\node_modules@angular\compiler-cli\src\static_reflector.js:478:22)
at StaticReflector.annotations (E:\io\Fanuc\node_modules@angular\compiler-cli\src\static_reflector.js:60:36)
at NgModuleResolver.resolve (E:\io\Fanuc\node_modules@angular\compiler\bundles\compiler.umd.js:14261:46)
at CompileMetadataResolver._loadNgModuleMetadata (E:\io\Fanuc\node_modules@angular\compiler\bundles\compiler.umd.js:14646:45)
at CompileMetadataResolver.getUnloadedNgModuleMetadata (E:\io\Fanuc\node_modules@angular\compiler\bundles\compiler.umd.js:14636:23)
at addNgModule (E:\io\Fanuc\node_modules@angular\compiler\bundles\compiler.umd.js:12944:43)
at E:\io\Fanuc\node_modules@angular\compiler\bundles\compiler.umd.js:12957:16
at Array.forEach (native)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “run” “ionic:build” “–” "–prod"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:build: ionic-app-scripts build "–prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script ‘ionic-app-scripts build “–prod”’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "–prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! E:\io\Fanuc\npm-debug.log

@dominicg666,

I am using latest ionic-cli: 3.0.0-beta.4, if I am not mistaken. These are new commands.

Try to remove your node_module and do run npm install and remove platforms and readd.

sorry it’s not working

i think need to modify the code.can u share your plugins list… i have upgraded to only ionic 2.1.1 bcoz i had other problems in my already released app…

{
“name”: “ionic-hello-world”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“watch”: “ionic-app-scripts watch”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“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/cloud-angular": “^0.11.0”,
"@ionic/storage": “1.1.7”,
“google-libphonenumber”: “^2.0.11”,
“ionic-angular”: “2.0.1”,
“ionic-native”: “2.4.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“sw-toolbox”: “3.4.0”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ionic/app-scripts": “1.1.0”,
“typescript”: “2.0.9”
},
“cordovaPlugins”: [
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [],
“description”: “Fanuc: An Ionic project”
}

i think you need to update your package.json file mine is

“scripts”: {
“build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “2.4.8”,
"@angular/compiler": “2.4.8”,
"@angular/compiler-cli": “2.4.8”,
"@angular/core": “2.4.8”,
"@angular/forms": “2.4.8”,
"@angular/http": “2.4.8”,
"@angular/platform-browser": “2.4.8”,
"@angular/platform-browser-dynamic": “2.4.8”,
"@angular/platform-server": “2.4.8”,
"@ionic/cloud-angular": “^0.8.0”,
"@ionic/storage": “2.0.0”,
“angular2-highcharts”: “^0.4.1”,
“ionic-angular”: “2.2.0”,
“ionic-native”: “2.4.1”,
“ionicons”: “3.0.0”,
“node-gcm”: “^0.14.4”,
“rxjs”: “5.0.1”,
“status-bar”: “^2.0.3”,
“sw-toolbox”: “^3.4.0”,
“zone.js”: “0.7.2”
},
“devDependencies”: {
"@ionic/app-scripts": “1.1.4”,
"@ionic/cli-build-ionic-angular": “0.0.3”,
"@ionic/cli-plugin-cordova": “0.0.9”,
“typescript”: “2.0.9”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”,
“phonegap-plugin-push”,
“cordova-sqlite-storage”
],

any luck after updating package.json and run npm install

its not working :frowning:

Try

  1. removing the android platform and adding it again, ionic platform remove android
  2. delete the node_modules and run npm install

i am already try this

I am Ionit from first beta and boot time still too long I use those techniques:

  • use loading page
  • use ServiceWorkers
  • divide bundle to vendor and app code (to cache vendor.js)
  • embed templates in js code, no separate server request to HTML template

I got 217ms loading time.
Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/9118

I written tutorial on https://www.sherpadesk.com/blog/optimizing-mobile-ionic-2-angular-2-app-for-production