What’s lazy loading

Who wants to wait for an application to be loaded? I don’t. Sometimes we choose to abandon the app than waiting. Getting the user to visit your website is not easy. So, losing him after all the effort is really a waste. Besides that, the first impressions matter. It’s our chance to win that visitor.

Therefore, we want to minimize the time between the user’s request for the app and the display of its first template. Lazy loading is our best friend for this problem.

Illustrative examples and files are based on the Angular app structure.

What’s lazy loading

Usually, when we think about lazy loading, we think of something slow. But our routes can be lazy and fast at the same time.

• To understand the problem, here is an explanatory image. When we first ask for a website in a browser. The web server sends us an index.html file. This file will not render the whole app since the browser needs the main bundle that contains modules, functionalities, and libraries to run the app. Here is where it comes the loading time of an app. And the app is either blank or displays a loader to tell you: “please wait” if the developer is kind. After then, we receive the principal bundles, and our app is finally displayed.

To avoid making the user waiting for the app to get started. We can split our application into small bandles. Therefore, download only the required files at the beginning and the other files when the user asks for them, which means download only on demand and, that’s called in Angular?lazy loading. Therefore, we will have something like this:

This time the main bundles will take less time since we don’t load everything. Thus, less to download and less for Angular to compile.?So, less time to start up the app. That improves startup time significantly, especially with enterprise applications.

Lazy loading is used to speed up our application’s startup time to give our app the best impression.

To get deeper with Angular, let’s examine how Angular build with and without lazy loading:

• main.js?contains our code minified, and uglified
• polyfills.js?has the polyfills scripts needed to ensure the app will work in all modern browsers.
• runtime.js?is a file used to load other files.
• style.js?This bundle contains the app style
• vendor.js?includes the required libraries needed to run the app, including Angular libraries.

Let’s start the app in the -prod mode.

The first thing you’ll notice is that it takes much more time to compile. Let’s analyze the bundles:

• We noticed the?vender.js?had disappeared. That’s because, in the production mode, Angular uses the?AOT?compiler?(Ahead Of Time). All our libraries are in our main bundle.
• The?AOT?compiler converts our templates and TypeScript code into Javascript to be rendered by the browser without including the compiler in the bundle to compile for us each time.
• The main bundle is a giant bundle in size, which is expected since it contains all our code with the libraries needed.

If we want to reduce an app’s loading time, we should reduce the main bundle’s size.

And that’s where?lazy loading comes to the scene.

Its role is to build the main bundle that is essential for the app to start and display the initial page. Other bundles are loaded when needed. That’s why by the way, it’s called lazy loading. We only load on demand.

Takeouts

• We can optimize our app starting up by lazy loading for some features that are rarely requested.
• Features accessed only by a user with a particular role can also be lazy-loaded to speed up the app loading.
• Lazy loading = delay until needed = load only in demand = less bundle size = less time loading the app = better user experience

Thanks TO :FAM