Ionic App size is way too big

I have a question, as i don’t want to drop out everything, just with care.

My js size is 1,6MB. (minimified / packed)

I’m using RxJS 5 / webpack 2 / typescript 2.4 / ionic 3 / angular 4 and pica plugin. (which is resizing image)

I’m using also firebase (the javacript part only)/fcm plugins (just the native ones).

Can somebody entail specifically, what components are responsible for this big size (even if i’m not using any other plugin). The feasible option would be for me, if the size would be around 200KB max. (as a webpage)

I have a fear also to remove parts of the angular 4, like animation and so on, will break the ionic 3. Also i have fixed directly some parts of the ionic code, and that’s why i cannot just rebuild the project to figure out the most heavy ones step by step, and that’s the reason, why i’m eliminating ionic from my project.

I’m on the way also to remove ionic 3 and rxjs from the project and use my own implementation, which just few KB in zip.

My project actual codebase is around 350-400KB. (unzipped, unminified, which suggest me that it will be around max. 40-50KB zipped minified)

I also saw a 4MB dex file in my apk, and i’m not really sure what is inside, if we have only a WebView with some lines of code.

1 Like

What command are you using to build your project?

There are tools to investigate the webpack output and look inside.

Look at the last comments, i have measured many things.

I have used ionic … --prod --release, i have noted that the file was shrinking, so i thought it has been applied.

Ok i just created a blank project - https://ionicframework.com/getting-started/

and i made ionic build --prod - i ended up with a 550KB vendor.js which is not acceptable also for an empty project without any code. (the css file also 500KB)

I’m investigating further, but something has a huge 1,6MB size in my project.

1 Like

It looks as though there are basic facts about RxJS and webpack that you do not understand, so you are importing far more than you need. Just using lettable operators would go a long way toward solving the main problem you report.

1 Like

In my real code i’m using what the guy described, and something is making the 1,6MB. I didn’t look at the line in the sample project, but either way is confusing, that’s a trap.

Did you analyze your build with a tool like https://github.com/danvk/source-map-explorer to see which dependencies are actually loaded? Maybe you will find some you don’t need …

Just an idea

1 Like

We are talking about a size of 550KB vendor js and 500KB css, just looking of your empty project on your tutorial. The css is too large, but for an empty project the size of 550KB also for a js. I’m looking for the remaining 1MB. I tried to remove some angular dependency, but it’s tight coupled without success.

About css, that will be better in Ionic 4

Right now all css are package in only one single main.css. As far as I understand, Ionic 4 will introduce the possibility to have separate css file pro modules

Also Ionic 4 will introduce a new way to load icons respectively to load only the one you use and not all icons

My real project is using the following dependencies, and i have a 1MB difference with the empty project just downloaded now. I tried to check the RxJS, but something else is the culprit one.

"dependencies": {
    "@angular/animations": "^4.4.4",
    "@angular/common": "4.4.4",
    "@angular/compiler": "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/core": "^4.4.2",
    "@ionic-native/fcm": "^4.4.2",
    "@ionic-native/splash-screen": "^4.4.2",
    "@ionic-native/status-bar": "^4.4.2",
    "@ionic/cli-plugin-cordova": "^1.6.2",
    "@ionic/storage": "2.0.1",
    "ajv": "5.2.2",
    "cordova-android": "^6.2.3",
    "cordova-browser": "^4.1.0",
    "cordova-ios": "^4.5.2",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-device": "~1.1.4",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-qrscanner": "^2.5.0",
    "cordova-plugin-splashscreen": "~4.0.2",
    "cordova-plugin-statusbar": "~2.2.1",
    "cordova-plugin-swift-support": "^3.1.1",
    "firebase": "^4.5.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "pica": "3.0.6",
    "promise-polyfill": "6.0.2",
    "run": "^1.4.0",
    "rxjs": "^5.5.5",
    "sw-toolbox": "3.6.0",
    "typings": "^2.1.1",
    "zone.js": "0.8.18"
},
"devDependencies": {
    "@angular/platform-server": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/cli": "^1.4.3",
    "@angular/tsc-wrapped": "^4.4.6",
    "@ionic-native-mocks/splash-screen": "^2.0.5",
    "@ionic-native-mocks/status-bar": "^2.0.5",
    "@ionic/app-scripts": "3.0.1",
    "@types/jasmine": "^2.6.0",
    "@types/node": "^8.0.28",
    "angular2-template-loader": "^0.6.2",
    "dotenv": "^4.0.0",
    "html-loader": "^0.5.1",
    "ionic": "3.13.0",
    "ionic-mocks": "^1.0.1",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.4",
    "lodash": "^4.17.4",
    "null-loader": "^0.1.1",
    "protractor": "^5.1.2",
    "ts-loader": "^2.3.7",
    "ts-node": "^3.3.0",
    "typescript": "2.5.3",
    "webpack": "^3.8.1",
    "worker-loader": "^1.0.0"
},
"cordova": {
    "plugins": {
        "cordova-plugin-console": {},
        "cordova-plugin-device": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-statusbar": {},
        "cordova-plugin-whitelist": {},
        "cordova-plugin-qrscanner": {},
        "cordova-plugin-fcm": {},
        "ionic-plugin-keyboard": {}
    },
    "platforms": [
        "android",
        "browser",
        "ios"
    ]
}

If I understand correctly, you try to reduce the size of vendor.js (basic, like with nothing added) right? I would be curious about that if it’s possible

I can investigate the firebase, but at the end i have got 1,58MB from this almost 6MB js code, and i think it’s proportionally minified. (at least i can guess) I have removed my stuff, just the size remained. (right hand corner) I have no idea what is the 500KB in the left hand corner next to the src. Angular version is 4.4.4 as i wasn’t able to upgrade because of an appscript bug, but either way it needs a miracle to solve this. I need to make a note, that i need 2-3 weeks to make my components bug free, but the menu / tab / virtual scroll is universal, so i have the spinner i have coded the toggle also. (and many other components, which is inside the 378KB) When i’m refactoring my stuff based on my own componets i can half my project size, as i don’t need to make workarounds.

1 Like

1.6MB doesn’t sound bad at all… some 3D game apps are about 900MB.
Need For Speed app is like 450MB. I have several of them on my smartphone.

It’s bad if you download as a webpage. I have chosen hybrid app to avoid the multiple code base. (so it’s a website also) The main thing it’s just the js and we have a css and the fonts also from ionic.

1 Like

well to be honest I think, when I look your diagram, you won’t be able to optimize that that much, but I would love to hear I’m wrong

but I don’t think it’s that bad, once minified and optimized your app won’t be that big. If you say 1.6mb that’s pretty “small” for today’s hybrid app. I guess that such a size you will have something like a boot time around 2sec, which is pretty cool

like I said, I hope, Ionic 4 gonna introduce some improvements I guess

I’m more interested that what Google did also is not nice. i cannot import the necessary stuff from firebase, it’s including everything, even if it’s not necessary. 2,5MB for every user it’s pretty big. I’m expecting 10-20 thousand at least, if the project is successful, and it can go far beyond that. It’s just a guess, as it’s a social app.

It’s also important to reduce the cost, as i can swallow few hundred bugs on maintenance, but if it’s more than i might not be able to finance in the present google ecosystem. The app is not for advertisement. (I hate that business model very much, as many guys just looking at his phone all the way, until they die because they don’t look at the road, and nowadays the aim of the giant is to force you to look at your device as much as possible.)

If i would have time, i would recreate the template and the dependency injection of the angular and remove the whole. (so at least i can drop out all the dependencies also)

Pls. compare what the ng cli has done in a different project, with 4.4.6 angular version.
I have a 4.4.4 version, and i have to say that the 5.0.0 version is bigger in the ionic myApp introduction project.

There is an interesting part, that @angular/compiler is not used in this project, and the ionic one needs it

Interesting…I don’t know why or why not this is needed. Maybe would be good to ask the Ionic team if they see possibilities to get rid of it?

I’m not sure who i can ask, and i might be not the right guy for this task.

Me neither :frowning:

But well right now if you want to know my thought, I’m personally just “waiting”. I think the Ionic team have plenty things going on in the right direction (web component, css, icon) and I’m super duper looking forward to Ionic 4

I have realized that i have learnt too many new technologies, and looking at the graph, i don’t know why i need to use the firebase, as i need to jump to WebSocket (i cannot avoid it - previously i was worried about the resources). It needs some Mqtt, to reconnect, what i need to dig into, but anyway it’s far more easier, that the firebase stuff, so i will eliminate lot of code. My worry was that Websocket needs some resources, and might drain battery with a new TCP connection, but i need real time communication now, and the FCM is not really useful on that one, so the notification itself can pass through on the websocket stuff. At least i remove the 20% of my project size. Anyway Google aknowledged my issues.

I have reported just 5 to Google. Chrome team is lazy, but the Android Studio team just prioritized P1, S1 and P1, S2 to my bugs. So i’m not that idiot what i look like.

One of the Google Chrome bug is, that when you inspect your device and the laptop hasn’t any network connection, it will show an empty page, no errors on the inspector tool. The other one was hard to fix, so they just closed them.:slight_smile:

I tried to persuade the Angular team to help the ionic team a little bit in the configuration, because they think that the ionic blank project has been messed up, it shouldn’t contain any compiler, it’s coming from the platformDynamic, instead of that they need to use AOT. (The blank project contains Angular 5, so i think it might be some negligence)

Anyway i’m on the right track now, to eliminate the ionic stuff. My own codebase will be drastically shrinking with my channel stuff. (each UI element on my page is subscribing to some channel, and instead of using eventemitter, i’m broadcasting, or independently send messages - my channel mechanism 30 lines simple javascript callback,which is far more efficient than the RxJS stuff)

As i need to write some native stuff to IOS and Android, which is the next phase of my project (i already investigated how i can do it, and i have learnt swift also, i’m a master in java), it will be easy, as i’m using some official library from Google, what i cannot really avoid, i very likely won’t use the cordova stuff.

I also realized that the uglify plugin can be configured a little bit better in Ionic, i was able to slash 5%.
(you can go to angular-cli and make an ng eject --prod, so you can look at their webpack configuration)

Other one is that there is a webpack plugin where you can add prod and dev variable to your code, i messed up that part, and now i learnt from ng, how it should have been done. I missed that part form ionic.

Other thing is, that uglify is not that efficient what i thought, the code contains some readable part also on Enumeration and some stuff (readable function and class names). Some other classes and functions are totally unreadable, so i think it’s some sort of bug in the uglify, or some thing, what they cannot resolve. If i’m counting the unresolved stuff, i think there is a 20-30% room for improvement on that one also.

You can also improve some stuff, if you jump to pbf http instead of json http.