{N}+Angular groceries android app is over 130MB


#1

Hi,
I just started with {N} about a week ago. So far I was able to:

  • complete the playground groceries tutorial for NS+Angular
  • setup a dev environment virtual machine (Linux Mint)
  • download and setup my groceries app locally using sidekick
  • connect an Android phone and run the app on it

My question is, why the size of the app+data is overwhelmingly huge - 132MB?
I am thinking it has to do with assets (images) and plugins included.

Doing builds is very new to me as I come from the web development. Any help is appreciated.


#2

While in the background, the app consumes 85.4 MB of RAM

Upon closer look, the App_resources folder is only 2.3MB, so the size must be affected by node modules and all the dependencies / plugins included. How to strip this to the bare minimum? Is there a command to include only what is used by the app?


#3

That does seem very high, I just deployed it to iOS and the size 34.1MB.

I haven’t played around with Sidekick yet, but I ran the following command: tns run ios --bundle --env.uglify --env.aot --release --device 1

I’ll try it on an Android tablet that I have.


#4

So with running: tns run android --bundle --env.uglify --env.aot --device 1
Total app size: 42.50 MB (App: 39.52 MB, Data: 2.98 MB)

(It might be a little smaller even if doing a --release, but I haven’t done this on Android before, and I would need to take the time to setup the certs and whatnot…probably a good reason for me to check out Sidekick.)

Pulling back some flags, I got the following sizes:

tns run android --bundle --env.uglify --device 1: 43.01 MB (App: 39.64 MB, Data: 3.37 MB)
tns run android --bundle --device 1: 46.71 MB (App: 40.18 MB, Data: 6.54 MB)
tns run android --device 1: 128 MB (App: 52.26 MB, Data: 75.78 MB)

I guess this shows how critical it is to bundle an {N}+ng app when you go to deploy it.

It looks like Sidekick doesn’t currently support the additional flags, which seems like a good feature for them to add: https://github.com/NativeScript/sidekick-feedback/issues/10


#5

There are a bunch of things you can do to reduce app size and startup time on an Angular/NativeScript app. Here’s a good how-to video: https://www.youtube.com/watch?v=7rHnLb-2tZ4


#6

Thanks, guys. will check these out. It is a lot to take in, considering it is my week 2 of mobile development.
@jzgoda If I use --bundle flag, will the LiveSync still work? I am developing the app and previewing it on device.


#7

@b-and-p As of now --bundle (WebPack) will not support live sync, but soon it will be in the next version of NativeScript - {N} 4.0.0.

Source: https://www.nativescript.org/roadmap-and-releases#releases


#8

@manojdcoder Got it, thanks. I am still a long way from releasing anything, so will just stick with the defaults for now.