Pemisahan kode dengan React.lazy dan Suspense

Anda tidak perlu mengirimkan lebih banyak kode daripada yang diperlukan kepada pengguna, jadi pisahkan paket Anda untuk memastikan hal ini tidak pernah terjadi.

Houssein Djirdeh

Jeff Posnick

Perhatian: Satu atau beberapa demo di halaman ini tidak lagi berfungsi, karena Glitch telah mengakhiri hosting.

Catatan: Jika Anda belum memahami ide dasar di balik pemisahan kode, lihat panduan Mengurangi payload JavaScript dengan pemisahan kode terlebih dahulu.

Metode React.lazy memudahkan pemisahan kode aplikasi React pada tingkat komponen menggunakan impor dinamis.

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Apa manfaatnya?

Aplikasi React yang besar biasanya akan terdiri dari banyak komponen, metode utilitas, dan library pihak ketiga. Jika tidak ada upaya untuk mencoba memuat berbagai bagian aplikasi hanya saat diperlukan, satu paket JavaScript yang besar akan dikirimkan kepada pengguna segera setelah mereka memuat halaman pertama. Hal ini dapat memengaruhi performa halaman secara signifikan.

Fungsi React.lazy menyediakan cara bawaan untuk memisahkan komponen dalam aplikasi menjadi potongan JavaScript terpisah dengan sedikit upaya. Kemudian, Anda dapat menangani status pemuatan saat menggabungkannya dengan komponen Suspense.

Ketegangan

Masalah saat mengirimkan payload JavaScript yang besar kepada pengguna adalah lamanya waktu yang diperlukan halaman untuk selesai dimuat, terutama pada perangkat dan koneksi jaringan yang lebih lemah. Inilah alasan pemisahan kode dan pemuatan lambat sangat berguna.

Namun, akan selalu ada sedikit keterlambatan yang harus dialami pengguna saat komponen pemisahan kode diambil melalui jaringan, jadi penting untuk menampilkan status pemuatan yang berguna. Menggunakan React.lazy dengan komponen Suspense akan membantu menyelesaikan masalah ini.

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense menerima komponen fallback yang memungkinkan Anda menampilkan komponen React apa pun sebagai status pemuatan. Contoh berikut menunjukkan cara kerjanya. Avatar hanya dirender saat tombol diklik, yang kemudian membuat permintaan untuk mengambil kode yang diperlukan untuk AvatarComponent yang ditangguhkan. Sementara itu, komponen pemuatan pengganti akan ditampilkan.

Di sini, kode yang membentuk AvatarComponent berukuran kecil, sehingga indikator lingkaran berputar pemuatan hanya ditampilkan dalam waktu singkat. Komponen yang lebih besar dapat memerlukan waktu lebih lama untuk dimuat, terutama pada koneksi jaringan yang lemah.

Untuk menunjukkan cara kerjanya dengan lebih baik:

• Untuk melihat pratinjau situs, tekan View App. Kemudian, tekan Fullscreen .
• Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
• Klik tab Jaringan.
• Klik dropdown Throttling, yang ditetapkan ke No throttling secara default. Pilih Fast 3G.
• Klik tombol Click Me di aplikasi.

Indikator pemuatan kini akan ditampilkan lebih lama. Perhatikan bagaimana semua kode yang membentuk AvatarComponent diambil sebagai potongan terpisah.

Catatan: React saat ini tidak mendukung Suspense saat komponen dirender di sisi server. Jika Anda melakukan rendering di server, pertimbangkan untuk menggunakan library lain seperti loadable-components yang direkomendasikan dalam dokumen React.

Menangguhkan beberapa komponen

Fitur lain dari Suspense adalah memungkinkan Anda menangguhkan pemuatan beberapa komponen, meskipun semuanya dimuat lambat.

Contoh:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
    <MoreInfoComponent />
  </Suspense>
)

Ini adalah cara yang sangat berguna untuk menunda rendering beberapa komponen sekaligus hanya menampilkan satu status pemuatan. Setelah semua komponen selesai diambil, pengguna dapat melihat semuanya ditampilkan secara bersamaan.

Anda dapat melihatnya dengan sematan berikut:

Catatan: Indikator pemuatan ditampilkan terlalu cepat? Coba simulasikan koneksi yang dibatasi di DevTools lagi.

Tanpa ini, masalah pemuatan bertahap, atau berbagai bagian UI yang dimuat satu per satu dengan masing-masing memiliki indikator pemuatannya sendiri, dapat dengan mudah terjadi. Hal ini dapat membuat pengalaman pengguna terasa lebih mengganggu.

Catatan: Meskipun penggunaan Suspense untuk memisahkan komponen sudah dapat dilakukan dan memudahkan pemangkasan ukuran paket, tim React terus berupaya mengembangkan lebih banyak fitur yang akan memperluas kemampuan ini lebih jauh. Roadmap React 16.x menjelaskan hal ini secara lebih mendetail.

Menangani kegagalan pemuatan

Suspense memungkinkan Anda menampilkan status pemuatan sementara saat permintaan jaringan dibuat di balik layar. Namun, bagaimana jika permintaan jaringan tersebut gagal karena beberapa alasan? Anda mungkin sedang offline, atau mungkin aplikasi web Anda mencoba memuat lambat URL berversi yang sudah tidak berlaku, dan tidak lagi tersedia setelah deployment ulang server.

React memiliki pola standar untuk menangani jenis kegagalan pemuatan ini dengan baik: menggunakan batas error. Seperti yang dijelaskan dalam dokumentasi, setiap komponen React dapat berfungsi sebagai batas error jika mengimplementasikan salah satu (atau keduanya) metode siklus proses static getDerivedStateFromError() atau componentDidCatch().

Untuk mendeteksi dan menangani kegagalan pemuatan lambat, Anda dapat menggabungkan komponen Suspense dengan komponen induk yang berfungsi sebagai batas error. Di dalam metode render() batas error, Anda dapat merender turunan apa adanya jika tidak ada error, atau merender pesan error kustom jika terjadi kesalahan:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {hasError: false};
  }

  static getDerivedStateFromError(error) {
    return {hasError: true};
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }

    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={renderLoader()}>
      <AvatarComponent />
      <InfoComponent />
      <MoreInfoComponent />
    </Suspense>
  </ErrorBoundary>
)

Kesimpulan

Jika Anda tidak yakin harus memulai dari mana untuk menerapkan pemisahan kode ke aplikasi React, ikuti langkah-langkah berikut:

1. Mulai di tingkat rute. Rute adalah cara termudah untuk mengidentifikasi titik aplikasi Anda yang dapat dibagi. Dokumen React menunjukkan cara Suspense dapat digunakan bersama dengan react-router.
2. Identifikasi komponen besar di halaman situs Anda yang hanya dirender pada interaksi pengguna tertentu (seperti mengklik tombol). Memisahkan komponen ini akan meminimalkan payload JavaScript Anda.
3. Sebaiknya pisahkan hal lain yang berada di luar layar dan tidak penting bagi pengguna.