React.js: Mengoptimalkan Performa Website dengan React Lazy

Okey guys, malam ini saya akan membagikan salah satu bagian yang penting dalam pengembangan website yaitu optimalisasi 😉

Kalian pernah nggak sih, membangun sebuah website yang menggunakan resource besar seperti keperluan assets (gambar dll) yang kompleks, penggunaan library dalam bentuk ui, utils dan lain-lain.

Kalian pasti pernah mengalami suatu kondisi dimana website yang kalian kembangkan itu jadi lemot😄 entah resource yang terlalu banyak, assets yang memiliki ukuran besar atau malah kalian tidak menerapkan kodingan berbasis clean-code 😃

Nah buat kalian pengguna React.JS, kalian bisa menggunakan sebuah library bawaan yang bernama React Lazy 😅

Optimalkan Website dengan Pengunduhan Modul yang Malas

Yappp, kalian tidak salah dengar kata malas 😕
Dalam pengembangan aplikasi web modern, optimisasi kinerja menjadi salah satu hal yang sangat penting. Salah satu area di mana kita dapat melakukan optimisasi adalah pada waktu pemuatan (loading time) aplikasi. React Lazy adalah salah satu fitur yang diperkenalkan dalam React untuk mengoptimalkan pembuatan aplikasi web dengan memperkenalkan pengunduhan modul yang malas (lazy loading). Sekarang kita akan membahasnya secara mendalam..

Apa itu React Lazy?

React Lazy adalah suatu teknik dalam React yang memungkinkan kita untuk memuat komponen secara dinamis hanya ketika dibutuhkan. Artinya, komponen tidak akan dimuat saat halaman web pertama kali dimuat, tetapi baru akan dimuat saat dibutuhkan 👀 seperti saat pengguna melakukan interaksi tertentu yang memicu tampilan komponen tersebut.

Teknik ini sangat bermanfaat jika kita memiliki aplikasi web dengan banyak komponen, terutama ketika beberapa komponen memerlukan sumber daya yang berat atau memiliki ukuran file yang besar. Dengan menggunakan React Lazy, kita dapat mengurangi waktu pemuatan awal aplikasi dan meningkatkan pengalaman pengguna.

Contoh Penggunaan React Lazy

Anggaplah kalian memiliki sebuah komponen yang akan menampilkan sebuah foto beresolusi besar, dimana foto tersebut memiliki ukuran diatas 20mb 😆. Kita beri nama komponen tersebut dengan ImageHero

Nah jika kalian menggunakan ImageHero secara langsung, maka tentu website kalian akan mengunduh terlebih dahulu file berukuran 20mb tersebut.

Disinilah penggunaan React Lazy dibutuhkan, kalian bisa membuat sebuah komponen seperti ini:

import React, { lazy, Suspense } from 'react';

const LazyImageHero= lazy(() => import('./ImageHero'));

function App() {
  return (
    <div>
      <h1>Contoh Penggunaan React Lazy</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyImageHero/>
      </Suspense>
    </div>
  );
}

export default App;

Pada contoh di atas, kita menggunakan fungsi lazy() yang disediakan oleh React untuk membuat modul komponen LazyImageHero menjadi komponen yang diunduh secara malas. Fungsi lazy() menerima sebuah fungsi import dinamis yang mengembalikan Promise yang mengekspor komponen yang ingin dimuat secara malas.

Selanjutnya, kita membungkus komponen LazyImageHero dengan komponen Suspense. Komponen Suspense digunakan untuk memberikan fallback atau tampilan sementara saat komponen sedang dimuat. Dalam contoh ini, kita memberikan pesan "Loading..." sebagai fallback.

Dengan menggunakan pendekatan ini, ketika LazyImageHero pertama kali diminta untuk dimuat, React akan mengunduh file komponen tersebut secara asinkron. Ketika unduhan selesai, komponen akan dimuat dan ditampilkan kepada pengguna.

Sampai sini pahamkan guys?
Gimana mudahkan.. 😄

Referensi: https://react.dev/reference/react/lazy

Mari terhubung bersama saya..
LinkedIn: https://www.linkedin.com/in/afzn00/
Github: https://github.com/ahmfzn00