Ionic Package Service - file size is MUCH bigger than when built locally

Hi,

I have a fairly simple Ionic 3 app, my www folder is about 5 MB, and if I build locally, my APK is about 4MB.

If I try to use the Ionic Package service, the app size jumps up to 60 MB!

I’ve done lots of research to see what I am doing wrong, to no avail. Does anyone have any feedback on what I should do to debug the issue, or does anyone else have this issue?

I am using XWalk, but the file size is 4MB locally, which is strange to me! The local APK installs and works fine, the APK generated by Ionic is EXTREMELY slow to load, I actually never even let it finish loading the splash screen it was so bad.

Local command I use to build

ionic cordova build android --prod

Command I use to trigger the package build

ionic package build android --profile prod --prod --release

Here’s some information about my app in case it helps:

Ionic info:

C:\git\mobile>ionic info

cli packages: (C:\git\mobile\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

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

System:

    Android SDK Tools : 25.2.5
    Node              : v6.10.3
    OS                : Windows 8.1
    npm               : 3.10.8

tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "src/**/*spec.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

package.json:

{
    "name": "App",
    "version": "0.0.1",
    "description": "App",
    "license": "Apache-2.0",
    "scripts": {
        "build": "ionic-app-scripts build",
        "clean": "ionic-app-scripts clean",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "test": "karma start ./.tests/karma.conf.js",
        "test-ci": "karma start ./.tests/karma.conf.js --single-run"
    },
    "dependencies": {
        "@angular/animations": "^4.3.1",
        "@angular/common": "^4.3.1",
        "@angular/compiler": "^4.3.1",
        "@angular/compiler-cli": "^4.3.1",
        "@angular/core": "^4.3.1",
        "@angular/forms": "^4.3.1",
        "@angular/http": "^4.3.1",
        "@angular/platform-browser": "^4.3.1",
        "@angular/platform-browser-dynamic": "^4.3.1",
        "@angular/platform-server": "^4.3.1",
        "@angular/router": "^4.3.1",
        "@ionic-native/app-version": "^4.1.0",
        "@ionic-native/core": "3.10.2",
        "@ionic-native/in-app-browser": "3.10.2",
        "@ionic-native/splash-screen": "3.10.2",
        "@ionic-native/status-bar": "3.10.2",
        "@ionic/storage": "2.0.1",
        "@types/pouchdb": "^5.4.28",
        "@types/pouchdb-browser": "^5.4.4",
        "@types/pouchdb-core": "^5.4.5",
        "@types/semver": "^5.3.32",
        "chart.js": "^2.6.0",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.3.1",
        "cordova-plugin-app-version": "^0.1.9",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-crosswalk-webview": "~2.2.0",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-inappbrowser": "~1.4.0",
        "cordova-plugin-splashscreen": "~4.0.1",
        "cordova-plugin-statusbar": "2.2.1",
        "cordova-plugin-whitelist": "1.3.1",
        "cordova-plugin-wkwebview-engine": "git+https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git",
        "enquire.js": "^2.1.6",
        "events": "^1.1.1",
        "ionic-angular": "^3.5.3",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "pouchdb": "^5.4.5",
        "pouchdb-browser": "^6.0.6",
        "pouchdb-upsert": "^2.0.2",
        "rxjs": "^5.4.2",
        "semver": "^5.4.1",
        "sw-toolbox": "3.4.0",
        "typescript": "^2.4.2",
        "zone.js": "0.8.11"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^2.1.3",
        "@ionic/cli-plugin-cordova": "1.6.2",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "@types/jasmine": "^2.5.53",
        "angular2-template-loader": "^0.6.2",
        "html-loader": "^0.4.5",
        "ionic": "3.7.0",
        "jasmine-core": "^2.7.0",
        "jasmine-spec-reporter": "^4.1.0",
        "karma": "^1.7.0",
        "karma-chrome-launcher": "^2.2.0",
        "karma-jasmine": "^1.1.0",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-webpack": "^2.0.4",
        "null-loader": "^0.1.1",
        "protractor": "^5.1.1",
        "ts-loader": "^2.0.3",
        "ts-node": "^3.0.2",
        "typescript": "2.3.3"
    },
    "config": {},
    "cordova": {
        "platforms": [
            "android",
            "ios"
        ],
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-crosswalk-webview": {
                "XWALK_VERSION": "22+",
                "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
                "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
                "XWALK_MODE": "embedded",
                "XWALK_MULTIPLEAPK": "true"
            },
            "cordova-plugin-device": {},
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-wkwebview-engine": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-app-version": {}
        }
    }
}

npm outdated:

C:\git\mobile>npm outdated
Package                             Current  Wanted  Latest
@ionic-native/core                   3.10.2  3.10.2   4.1.0
@ionic-native/in-app-browser         3.10.2  3.10.2   4.1.0
@ionic-native/splash-screen          3.10.2  3.10.2   4.1.0
@ionic-native/status-bar             3.10.2  3.10.2   4.1.0
@types/pouchdb                       5.4.28  5.4.28   6.3.0
@types/pouchdb-browser                5.4.4   5.4.4   6.1.1
@types/pouchdb-core                   5.4.5   5.4.5   6.1.5
cordova-plugin-console                1.0.5   1.0.5   1.0.7
cordova-plugin-crosswalk-webview      2.2.0   2.2.0   2.3.0
cordova-plugin-device                 1.1.4   1.1.4   1.1.6
cordova-plugin-inappbrowser           1.4.0   1.4.0   1.7.1
cordova-plugin-statusbar              2.2.1   2.2.1   2.2.3
cordova-plugin-whitelist              1.3.1   1.3.1   1.3.2
cordova-plugin-wkwebview-engine   1.1.4-dev     git     git
html-loader                           0.4.5   0.4.5   0.5.1
pouchdb                               5.4.5   5.4.5   6.3.4
sw-toolbox                            3.4.0   3.4.0   3.6.0
zone.js                              0.8.11  0.8.11  0.8.16

Thank you all in advance!
Carl

Your local command is missing --release to be comparable to the Package command.
You might want to try to do a debug build on Package (without --release) also to see if this one starts.

You can rename the .apk to .zip and unpack it, then compare the content with a program like WinMerge.

Looks to me that your local build doesn’t actually use Xwalk, for whatever reason.

Thanks for your response @Sujan12!

I tried debug builds with the same results, which is why I set up a production profile and tried to build in production. That only saved me a few megs though.

I just ran a --release locally and the build size is actually smaller, 3.7MB!

I’ll try to compare the contents of the APK’s next to see what’s different.

Thank you!

Hi @Sujan12,

The folder structures between the two builds are completely different!

The main difference in causing the large file are the “libxwalkcore.so” files under the lib\x86 and the lib\armeabi-v7a folders. The x86 file is 54MB and the arm file is 36mb.

Thoughts?

Update: I uninstalled crosswalk; the app size is now 2.5MB!

Unfortunately, it still does not load. Splash screen stays open indefinitely… I restarted a few times and eventually got a white screen. There are no views open within the chrome remote devices screen.

EDIT: Problem is now fixed. I was getting a white screen because I recently upgrade to the new Ionic scripts which required a change to the index file to use include vendor.js.

All looks good now. Guess I will live without XWalk!

Thank you!

1 Like