Ionic app size

Ionic Framework ionic-v3
1

Hello everyone!

So, I noticed that a blank ionic app have a size of 3MB, and as I installed some plug-ins and added some files, I am at 5.7MB, when I already minified my files and deleted my useless Icon…

Does anyone have an idea to reduce the size of the app to like 2-3MB max?

Thanks for the answer!

2

I can’t tell you what you can additionally change in your app, but what I can give are my steps if I have to minify the app.

For Android you can also follow this guideline from Google.
https://developer.android.com/topic/performance/reduce-apk-size.html

Hope it helps.

3

Thans for your reply I’ll try this !

4

Keep in mind that uglifying as well as minifying are done for you automatically when you build with the --prod argument e.g.

ionic cordova build android --prod

In general when you are concerned about reducing app size you should use the command, as it also does a number of other things to increase performance and reduce your bundle size.

1 Like
5

Build with --prod flag
Here: ionic build android --prod --release

and also use tsconfig.json - es5

1 Like
6

but that will only work if you have the availability to build with ionic. In some cases is that not possible.

7

if you use es6, it does not work

8

Could you elaborate on that please?

9

In some cases you have to build via Android Studio or Xcode.

10

That doesn’t matter.

The --prod is a parameter for the Ionic build which 1) takes your src and makes it into the www.
Then the Cordova build is started where 2) www is copied over to the platforms directories and then 3) built into a native package.

Xcode and Android Studio can only replace the last of these 3 steps - both building www and copying it to the platforms has to happen with the Ionic and/or Cordova CLI.

1 Like
11

I had in the past a lot of side effect with it, well finally I guess we all have the same answer for @iSkyDive :slight_smile: uglify :smiley:

12

Hello everyone, sorry for the late response, I was on vacations.

So I tried your

ionic cordova build android --prod --release

, and I get an error :

[14:27:04] build prod started …
[14:27:04] clean started …
[14:27:04] clean finished in 12 ms
[14:27:04] copy started …
[14:27:04] ngc started …
[WARN] Error occurred during command execution from a CLI plugin
(@ionic/cli-plugin-cordova).
Error: Type CanvasDraw in C:/Users/User/Desktop/MyListApp/src/components/canva
s-draw/canvas-draw.ts is part of the declarations of 2 modules: AppModule in C:/
Users/User/Desktop/MyListApp/src/app/app.module.ts and CanvasDrawModule in C:/
Users/User/Desktop/MyListApp/src/components/canvas-draw/canvas-draw.module.ts!
Please consider moving CanvasDraw in C:/Users/User/Desktop/MyListApp/src/comp
onents/canvas-draw/canvas-draw.ts to a higher module that imports AppModule in C
:/Users/User/Desktop/MyListApp/src/app/app.module.ts and CanvasDrawModule in C
:/Users/User/Desktop/MyListApp/src/components/canvas-draw/canvas-draw.module.t
s. You can also create a new NgModule that exports and includes CanvasDraw in C:
/Users/User/Desktop/MyListApp/src/components/canvas-draw/canvas-draw.ts then i
mport that NgModule in AppModule in C:/Users/User/Desktop/MyListApp/src/app/ap
p.module.ts and CanvasDrawModule in C:/Users/User/Desktop/MyListApp/src/compon
ents/canvas-draw/canvas-draw.module.ts.

I do not have this error when I serve. And I can’t even understand what’s going on …

13

Are you using lazy loading? If so, remove CanvasDraw from your app component, otherwise remove the canvas-draw.module.ts.

14

Hmmm what is lazy loading in fact…? ^^