In this post we are going to see ionic 3 and ionic 4 performance tips to decrease loading time, so you are an ionic developer you may notice that you finish your application and test in a real device you see how much it takes to just load even if lately with the latest updates from ionic team it becomes much faster, however you can optimize more.
Lazy Loading Web Components
The first thing you gonna do is to implement lazy loading, even it's implemented by default you generate a new page for example with ionic g page pageName
, with ionic 3 we use @IonicPage
to lazy load our pages, with ionic 4 we use Angular components with Angular routing
. so to understand clearly this lazy loading, it's very simple idea just instead of loading all page on lunch time, we only load the components needed. That means when you write a component like <ion-button>
this component will only be loaded individually when it's accessed the application, and that's what makes ionic amazing because all that works for you behind the scenes by default.
Tappable/Clicking components
There was a clickable elements by default like buttons and links, but in mobile you may want another element to be clickable like div, img .... or even an ionic component like <ion-card>
so for that you must add a very important attribute tappbale
like this:
<ion-header tappable> click here </ion-header>
Enable Prod Mode
Add this one important function on your file main.ts
after importing the function
import "enableProdeMode" from @angular/core
enableProdeMode()
by doings this you will save a bit of time loading for you, it will enable the production mode you finally build your application for production.
Build For Production
ionic cordova build android --prod --release
by doing this you will notice a decrease of the size of apk
file and also the application works more fast.
Files Optimization
If you work with images for you have to optimize theme by compressing theme and also use small files with .JPG .JPEG be aware of .PNG files, and it's preferable to host all your files somewhere in the internet and not on your application in the device storage because it will be uninstalled directly from users.