[cli v4] App size too big, all ionicons v4 packed into bundle

[peterpeterparker]

Description:
In an Ionic v4 app, when building it with the cli v4, all ionicons will be integrated in the bundle regardless of their use or not which leads to a too big app size

When I run ionic cordova build android --prod --release the app-release.apk will contains a folder www/svg with all ionicons

Steps to Reproduce:

 ionic start test-icons --type=angular
 cd test-icons
 ionic cordova build android --prod
 cd platforms/android/app/build/outputs/apk/debug/
 unzip app-debug.apk
 cd assets/www/svg/
 ls -ltr

or

ls -ltr | wc -l 

which will count 697 icons

Output:

My ionic info:

Ionic:

ionic (Ionic CLI) : 4.0.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.3
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0

System:

Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
ios-sim : 5.0.13
NodeJS : v10.4.0 (/usr/local/bin/node)
npm : 6.2.0
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000

[imhoffd]

I'm seeing only ~400kb added once the apk is created. I don't think that's unreasonable.

EDIT: although, maybe it's closer to the original 2.7MB once unpacked...

[imhoffd]

With Ionic 4 we really want to move away from custom tooling so we can move fast in more meaningful areas. Basically, focus on our strengths.

I'm open to PRs, but I'm not seeing a maintainable solution to this with custom tooling.

[imhoffd]

It's especially hard to know which SVGs are unused because different ones can be requested at runtime.

[peterpeterparker]

I've to say I'm not really agree with "400kb is reasonable", my markets are markets where users have wifi and 4g but I could think that in other markets 400kb are really meaningful

I also always think "smaller the app is = faster everything is = less users may drop during download from the stores, first boot, etc."

Therefore I don't think that the will of not having a custom tooling should be more important than the size of the app

Of course I'm totally agree with you, it might be complicated to solve

In Font-Awsome didn't they finally solves the same problem or are they still facing it? If they solved it maybe it could give an idea about how to solve the issue

[imhoffd]

Sorry, those messages were sort of a brain dump towards the end of the day.

I more so meant 400kb is reasonable given how many Ionicons are offered, and the comfort it gives to know that they'll be available even when used dynamically. I totally agree that a small bundle is super important for Ionic! But I have a feeling this issue will be more of a discussion of trade-offs vs something immediately actionable.

Perhaps some research is necessary to see if it's possible to do this during webpack/Angular build. If not, maybe offer a separate tool on ionic-team github org that goes through and removes the SVGs before building an APK/IPA. The Ionic CLI has hooks that can run it, but I'm a bit behind documentation in this area.

[peterpeterparker]

@dwieeb no worries, it was late here too, thx for the explanation, I'm agree with you 👍

[TomDemulierChevret]

@peterpeterparker Font-Awesome solved it with V5, you can explicitly import the icons you want and only them will be bundled in your build.
Bonus => with their Angular library it's automatic since it use Typescript imports to determine which icons are used : https://github.com/FortAwesome/angular-fontawesome

Ionic should use a similar strategy, especially if they want their components to be used in webapps.

[peterpeterparker]

@dwieeb actually maybe this issue should be move in the ionicons repo because it doesn't impact only the bundle of iOS and Android apps but also all types of app.

If I'm not mistaken, there isn't yet any webpack or rollup plugin to bundle only the necessary Ionicons in any projets. Therefore, in a PWA I might end up having a bundle which will contains all icons too. This will has for final effect that service worker of the PWA might try to cache all icons on the clients device.

Example -> https://deckdeckgo.com -> observe the service worker, it caches all ionicons

[bkarv]

I just did a PWA production build (ionic build --prod) and in the WWW folder the SVG's add up to 6.9mb. Surely something must be going wrong??

I am using Ionic Icons 4.5.1 and snapshot fo the SVG.

[pitamash]

go to platforms folder ,
search png or jpg ,
delete all images you think you added and don't want.,
Or delete images you dont neeed in your assets/imgs/ folder,

I have solved problem by removing www folder from project and then build.

[gdinn]

I have solved problem by removing www folder from project and then build.

It worked, but in my case I also removed plaforms, plugins and node_modules because removing www lead me to another issue, which after removing these aditional folders (and doing npm install and all that) resolved.