Analyse your Ionic App Size

Here’s a tip on analyzing your bundle size, the dependencies your app relies on and how to quickly identify payload bloat.

At the command line produce a stats file of your project:

ng build --prod --stats-json

Then run webpack bundle analyzer to visualize your app:

npx webpack-bundle-analyzer www/stats.json

(note: this will run the tool without installing it).

You should then see a visualization of your Ionic app opened in a browser window:

The size of each box shows relative size compared to your app. In this example you can see that moment.js take up as much as @angular or @ionic, its now a great candidate to review whether it is needed in the app or whether it can be replaced by something lighter like date-fns.

One word of advice: often the largest part of your application is actually the icons and splash screens and their variations. Consider the larger picture and start with (for example) the generated IPA file for your app. Rename it to .zip, extract it to a folder (rename the .app file to .zip as well and extract that), then review the folder sizes to review icons, splash screens and native plugin sizes. You may get some great savings by optimizing your pngs or using jpg instead.