Capacitor app size compared to Cordova

adrianarr · July 28, 2021, 2:45pm

Hi,

We have an app that was developed on ionic 4 with cordova and I migrated to ionic 5 with capacitor 3. My expectation was that the app size would decrease besides other improvements. But after generating the signed apk the new app was almost the double of the size of the original app.
The code is the same, I changed only some plugins (in fact removed some of them and change others). Any suggestion / solution for this?

Original App package.json

...
"dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/android-permissions": "^5.31.1",
    "@ionic-native/app-version": "^5.21.5",
    "@ionic-native/core": "^5.21.5",
    "@ionic-native/document-viewer": "^5.21.5",
    "@ionic-native/file": "^5.31.1",
    "@ionic-native/file-opener": "^5.21.5",
    "@ionic-native/firebase-x": "^5.21.5",
    "@ionic-native/network": "^5.30.0",
    "@ionic-native/splash-screen": "^5.21.5",
    "@ionic-native/status-bar": "^5.21.5",
    "@ionic/angular": "^4.11.10",
    "@ionic/storage": "2.2.0",
    "cordova-android": "^9.1.0",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-androidx-adapter": "^1.1.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-cleartext": "^1.0.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.0",
    "cordova-plugin-firebasex": "^7.0.2",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-res": "^0.15.2",
    "cordova-sqlite-storage": "^4.0.0",
    "core-js": "^2.5.4",
    "crypto-js": "^3.3.0",
    "ng2-pdfjs-viewer": "^5.0.7",
    "rxjs": "^6.5.4",
    "tslib": "^1.9.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "^2.1.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.1",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-firebasex": {
        "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
        "FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
        "FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true",
        "ANDROID_ICON_ACCENT": "#FF00FFFF",
        "ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0",
        "ANDROID_FIREBASE_ANALYTICS_VERSION": "17.2.1",
        "ANDROID_FIREBASE_MESSAGING_VERSION": "20.0.0",
        "ANDROID_FIREBASE_CONFIG_VERSION": "19.0.3",
        "ANDROID_FIREBASE_PERF_VERSION": "19.0.1",
        "ANDROID_FIREBASE_AUTH_VERSION": "19.1.0",
        "ANDROID_CRASHLYTICS_VERSION": "2.10.1",
        "ANDROID_CRASHLYTICS_NDK_VERSION": "2.1.1"
      },
      "cordova-plugin-file-opener2": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-android-permissions": {}
    },
    "platforms": [
      "android"
    ]
  }

New app package.json

...
"dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/android": "^3.1.2",
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "3.1.2",
    "@capacitor/filesystem": "^1.0.2",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/network": "^1.0.2",
    "@capacitor/status-bar": "1.0.2",
    "@ionic/angular": "^5.5.2",
    "capacitor-data-storage-sqlite": "^3.1.2-2",
    "crypto-js": "^4.1.1",
    "localforage": "^1.9.0",
    "ng2-pdfjs-viewer": "^6.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "3.1.2",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project"

rapropos · July 28, 2021, 10:47pm

I get nervous whenever I see low-level primitive libraries like crypto-js, but that’s irrelevant to your current concern.

Have you enabled AOT compilation? If your app is old enough that it goes back to at least Angular 8, JIT was the default then. Look in angular.json for the architect…build…options section. There should be an aot: true in there.

adrianarr · July 29, 2021, 10:45am

Thank you. I created a new ionic 5 capacitor 3 project and then I added the source code and added the new plugins. So yes, AOT true.
Original ionic 4 and cordova 12MB
New app with ionic 5 and capacitor 22MB.

Regarding criptojs I will replace other things later on. For now, just want to try capacitor 3.

rapropos · July 29, 2021, 6:30pm

Can you try deploying something like webpack-bundle-analyzer to inspect what’s taking up how much space?

adrianarr · August 3, 2021, 9:24am

This is what I’ve got. Does it help?

mhartington · August 3, 2021, 2:13pm

Hmm, this doesn’t really tell us too much, since it’s really just looking at the source map for a single main.js file.

How are you getting a size 22mb? Where are you looking to get that number? Because that might not be an accurate size. If you’re just looking at the build output file size, that doesn’t really take into consideration that all of that code is not loaded upfront, but later with lazy loading.

If you are looking at the installed ipa/apk file, that is actually small compared to most native apps.

Also check to see if you are running with prod enabled.I

adrianarr · August 3, 2021, 2:57pm

Hi, thank you for your feedback. I am comparing apk sizes. The original one was 12MB and now with ionic 5 / capacitor 3 the apk is 22 MB. That’s all. I was expecting a smaller size and I just wanted to check if I was doing anything wrong…

mhartington · August 3, 2021, 3:19pm

Probably not. Since the final build output (the APK) is actually a glorified zip file, it can contain multiple bundles of your app that google play will use to when users download it. So 22mb apk or aab could contain different versions for different architectures.

adrianarr · August 4, 2021, 11:16am

Thank you for your attention on this.

Topic		Replies	Views
Huge app size with Capacitor compared to Cordova Capacitor	2	3635	August 25, 2019
Ionic 4 apk is bigger that version 3 ionic-v3	5	1917	April 6, 2019
Migrating to Capacitor Ionic Native	0	454	April 9, 2019
Normal app size for an ionic app	1	1744	October 30, 2014
Ionic and Capacitor 3 - How to reduce app size and delete unused libs and resources? Ionic Framework	2	766	July 29, 2021

Capacitor app size compared to Cordova

Related topics