Panduan untuk Lazy Loading Dengan React

Pengantar

Saat mengembangkan aplikasi React besar, kami biasanya menggunakan banyak gambar dan video, menginstal paket/library pihak ketiga, melakukan panggilan API, dan melakukan berbagai hal lainnya. Itu secara alami meningkatkan waktu yang diperlukan untuk memuat aplikasi kami dan menghasilkan ukuran bundel yang sangat besar, yang berkontribusi pada pengalaman pengguna yang buruk. Di situlah pemuatan malas datang ke tempatnya. Ini memungkinkan kami memuat konten tepat waktu, tepat sebelum akan ditampilkan di aplikasi.

Kami dapat menghindari konten pra-pemuatan saat masih tidak terlihat, dan memfokuskan semua sumber daya pada konten yang ada dalam tampilan.

Dalam panduan ini, kita akan melihat cara menggunakan React.lazy() dan React.Suspense untuk mengimplementasikan fungsi lazy loading dan code splitting yang memungkinkan kita menangani code splitting tanpa perlu menginstal library tambahan.

Apa itu Pemuatan Malas?

Saat kami meluncurkan aplikasi web React, biasanya aplikasi tersebut menggabungkan seluruh aplikasi sekaligus, memuat semuanya termasuk seluruh halaman aplikasi web, gambar, konten, dan banyak lagi untuk kami, berpotensi mengakibatkan waktu buka yang lambat dan kinerja yang buruk secara keseluruhan, tergantung pada ukuran konten dan bandwidth internet pada saat itu.

Pemuatan malas memungkinkan kita untuk memuat komponen tertentu hanya saat dibutuhkan. Biasanya, kami juga melakukan pemecahan kode menjadi komponen logis yang juga dapat memuat konten dengan malas.

Misalnya, jika kita memiliki halaman dasbor yang menampilkan banyak informasi dari berbagai sumber saat diklik, selalu yang terbaik adalah menjaga komponen dan halaman ini dengan lambat, sehingga hanya memuat saat dibutuhkan atau dibutuhkan oleh pengguna.

Catatan: Proses meludahkan bundel besar kode menjadi beberapa bundel yang dapat dimuat secara dinamis dengan tujuan keseluruhan untuk menghindari masalah kinerja yang terkait dengan bundel besar dikenal sebagai pemecahan kode. Ini dilakukan tanpa mengurangi jumlah kode di aplikasi kami.

Singkatnya, pemuatan lambat memungkinkan kita untuk merender komponen atau elemen sesuai permintaan, membuat aplikasi kita lebih efisien dan memberikan pengalaman pengguna yang lebih baik.

Catatan: Aplikasi Halaman Tunggal (SPA) dirancang untuk memuat semua halaman dan konten dalam satu dokumen/halaman. Itulah mengapa lazy loading sangat berguna saat mengembangkan SPA.

Bagaimana Menerapkan Pemuatan Lazy di React

Sejauh ini, kita telah melihat apa itu lazy loading dan mengapa penting untuk diterapkan. Sekarang, mari kita lihat bagaimana kita bisa mengimplementasikannya di aplikasi React kita, menggunakan dua fitur React yang membuat code-splitting dan lazy loading mudah diimplementasikan – Bereaksi.malas() dan Reaksi. Ketegangan.

React.lazy() adalah fungsi yang memungkinkan kita untuk merender impor dinamis dengan cara yang sama seperti komponen biasa. Menggunakan impor dinamis di samping React.lazy() akan memungkinkan kita untuk mengimpor komponen sebelum ditampilkan di layar. Hal penting yang perlu diperhatikan adalah React.lazy() menerima fungsi sebagai argumen - fungsi itu harus memanggil dinamis import() dalam tubuhnya.

React.Suspense memungkinkan kita untuk menentukan fallback menopang yang mengambil konten placeholder yang akan digunakan sebagai indikator pemuatan sementara semua komponen malas dimuat.

Mari kita mulai dengan melihat bagaimana kita bisa menerapkan pemuatan lambat di komponen yang diimpor, dan kemudian bagaimana kita bisa mengimplementasikannya di rute kita sehingga halaman tidak dimuat sampai kita menavigasi ke sana.

Mulai

Misalkan kita memiliki aplikasi React, dan kita mengimpor About komponen ke dalam Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Kami sekarang dapat menerapkan pemuatan malas dengan memanfaatkan React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Catatan: React.lazy() digunakan dengan cara ini mengembalikan Promise obyek. Janji itu diselesaikan ke modul yang berisi komponen Bereaksi yang ingin kita muat lambat di dalamnya default ekspor.

Kami telah menerapkan pemuatan malas menggunakan React.lazy(), tetapi kode di atas akan selalu mengeluarkan kesalahan mengatakan bahwa kami “React component suspended while rendering, but no fallback UI was specified”. Ini dapat diperbaiki dengan membungkus komponen dengan React.Suspense's fallbackz dan melampirkan alat peraga mundur seperti yang kami jelaskan sebelumnya:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Catatan: Prop fallback dapat mengambil komponen untuk ditampilkan sebelum konten asli dimuat.

Selain itu, kita dapat memutuskan untuk merusak impor Bereaksi untuk membuat kode lebih bersih dan lebih mudah dibaca:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Sejauh ini, kita telah melihat bagaimana menerapkan lazy loading pada komponen yang diimpor. Sekarang, mari kita lihat bagaimana mengimplementasikannya di rute kita saat merutekan dengan router React.

Bagaimana Menerapkan Pemuatan Lazy Dengan React Router

Perutean lambat sebenarnya adalah praktik yang baik untuk rute yang memiliki banyak konten dan dapat memperlambat waktu buka aplikasi Anda. Menerapkan lazy loading untuk rute React hampir identik dengan apa yang kami lakukan sebelumnya ketika lazy loading komponen yang diimpor secara dinamis.

Lazy loading React route mengacu pada mengimpor komponen secara dinamis hanya saat dibutuhkan. Misalnya, kita memiliki dua rute dalam aplikasi kita dan dua komponen yang mewakili rute tersebut. Jika kami menerapkan perutean yang disebutkan dengan cara berikut, setiap komponen hanya akan dimuat ketika kami menavigasi ke rute yang sesuai:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Kesimpulan

Dalam panduan ini, kita mempelajari apa itu lazy loading dan code splitting, bagaimana mengimplementasikannya, dan bahwa tempat terbaik untuk mengimplementasikan lazy loading adalah dengan route. Ini menghindari rendering seluruh halaman sekaligus, yang dapat mengakibatkan waktu buka lebih lambat saat menangani halaman dengan konten dalam jumlah besar.