An Ionic framework application makes development very easy and fast for multiple platforms, but sometimes due to performance issues like fluctuation in animations, jerk movements during user interactions calls for some tricky solutions to manage code with better optimizations.

One such issue is startup time of Ionic applications, with more views an application startup time increases many folds due to a number of components loading at once during app initialization. We can improve this situation by Lazy Loading component in the application.

What is Lazy Loading?

Lazy Loading is a process of loading only those components which are required for the current view. Applications using Lazy Load do not load all components at once so at initialization only one component of root page will be loaded, this really improves the loading time of ionic applications.

How to Implement Lazy Loading in Existing App?

To demonstrate the implementation of Lazy loading first we will create a new blank Ionic application. After that will implement Lazy Loading on Home Component which is created by default in new Ionic 3 Project. After that, we will implement Lazy loading by doing some changes.

So let’s begin

Create New Ionic 3 Application

JavaScript

1

2

$ionic start Ionic3LazyLoading blank

$cd Ionic3LazyLoading

If you are using Visual Studio Code editor then type
$code. to open files directly from cmd.

Now we have a normal file structure with the blank template not having Lazy Load functionality.

You also need to define modules for Home Page in home.module.ts instead of app.module.ts

That’s all guys!!! now you will see a considerable change in app start speed on real devices. After creating production release your app size will decrease and will further improve initialization speed.

Leave a Reply

Connect with

I allow to create an account

When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.

DisagreeAgree

This comment form is under antispam protection

Connect with

I allow to create an account

When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.