Exclude unused Ionic components

Hey folks

I have a PWA that does not use many of Ionic’s components, but it still includes all of the components (js alone is 137kb).

I was just wondering if there is a way to slim down the overall size of Ionic. JS and CSS.


Why I am asking this:

My small PWA currently is 1MB+ js and 260kb css. Since my PWA does use very little Ionic components, I thought of excluding the unneeded ones.

E.g. having the checkbox Ionic component in the build does also mean including @angular/forms (which is 59kb).

(lots of unused components and dependencies, like the @angular/forms dependency)

Is there a way to do this by initializing only needed components in the module.app.ts or maybe some webpack sorcery?

Thanks in advance! Cheers

Have a look at this: https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/

Ionic Angular v4 (whenever it will be released) will do all of this by default as the components are loaded asynchronuosly, I have been told. But no ETA or anything yet.

yeah i checked julien’s post as well, sadly doesn’t work with latest ionic-app-scripts - or maybe good, because they caught up on that! (except the hard excluding components for the css, that obviously works)

Ok then I hope ionic-angular 4 is coming soonsoonSoonSOON! :smiley:

edit: tried the "ionic-angular": "nightly", but was too early I guess - even though everything worked without upgrading anything bigly