Advance Javascript : Lazy Loading

In my previous articles I explained optimization patterns such as deboucing and throttling, in this article let’s do a deep dive into lazy loading , which defers the loading of resources until they are actually needed. This article will walk you through a simple example of implementing lazy loading in a TypeScript web application.

What is Lazy Loading?

Lazy loading is a design pattern commonly used to delay the initialization of objects until the point at which they are needed. In the context of web development, this often refers to loading resources like images, scripts, or modules only when they are required, rather than at the start of the application. This can significantly reduce initial load times and improve overall performance.

Project Overview

We will create a web page with a button. When the button is clicked, a module containing a heavy computation function will be loaded and executed. This example uses TypeScript and native ES modules to achieve lazy loading.

Setting Up the Project

Project Structure

lazy-loading-example/
├── dist/
│   ├── index.html
│   ├── app.js
│   └── lazyModule.js
├── src/
│   ├── index.html
│   ├── app.ts
│   └── lazyModule.ts
├── tsconfig.json
└── package.json

Initialize the Project

npm install typescript --save-dev
npx tsc --init

Configure TypeScript

Edit ‘tsconfig.json ‘to target ES6 and use ESNext modules:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Writing the Code

Create HTML File

Create ‘src/index.html‘ with a button and script tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Example</title>
</head>
<body>
  <h1>Lazy Loading Example</h1>
  <button id="loadButton">Load Module</button>
  <script type="module" src="./app.js"></script>
</body>
</html>

Create Lazy Module

Create ‘src/lazyModule.ts‘ which contains a heavy task function:

export const performHeavyTask = () => {
  console.log('Performing a heavy task...');
  // Simulate a heavy task
  for (let i = 0; i < 1e7; i++) {}
  console.log('Heavy task completed.');
};

Create Main Application File

Create ‘src/app.ts‘ to handle button click and load the module

const loadButton = document.getElementById('loadButton') as HTMLButtonElement;

loadButton.addEventListener('click', async () => {
  const module = await import('./lazyModule.js');
  module.performHeavyTask();
});

Compile and Run

Compile the TypeScript files

npx tsc

Serve the Application

Use a static file server to serve the files. Here’s a quick way to do it using ‘http-server‘

npm install -g http-server
http-server dist

Open in Browser

Open your browser and navigate to http://localhost:8080 (or the port http-server provides). Click the “Load Module” button to see the lazy loading in action. The performHeavyTask function from lazyModule will be dynamically imported and executed, demonstrating lazy loading.

Conclusion

Lazy loading is an effective way to optimize web application performance by loading resources only when they are needed. In this example, we’ve seen how to implement lazy loading in a TypeScript web application using native ES modules. This technique can be extended to other resources like images and scripts to further enhance your application’s performance.

By adopting lazy loading, you can ensure that your web applications are both efficient and responsive, providing a better experience for your users

For complete source – https://github.com/IndikaMaligaspe/advance-javascrips/tree/master/topics/performance-optimization

Indika Malgaspe

Advance Javascript : Lazy Loading

Leave a Reply Cancel reply