Pemisahan kode dengan React.lazy dan Suspense

Anda tidak perlu mengirimkan kode lebih dari yang diperlukan kepada pengguna. Jadi, bagi paket Anda untuk memastikan hal ini tidak terjadi.

Houssein Djirdeh

Jeff Posnick

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 level komponen menggunakan impor dinamis.

import React, { lazy } from 'react';

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

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

Mengapa hal ini bermanfaat?

Aplikasi React yang besar biasanya akan terdiri dari banyak komponen, utilitas metode, dan library pihak ketiga. Jika tidak ada upaya untuk memuat bagian aplikasi yang berbeda-beda hanya ketika dibutuhkan, satu, ukuran paket JavaScript akan dikirimkan ke pengguna Anda 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-potongan JavaScript yang terpisah dengan sangat sedikit kerja keras. Anda dapat kemudian menangani status pemuatan saat Anda memasangkannya dengan Suspense komponen.

Ketegangan

Masalah dengan mengirimkan {i>payload<i} JavaScript yang besar kepada pengguna adalah panjang waktu yang diperlukan agar halaman selesai dimuat, terutama pada perangkat yang lebih lemah dan koneksi jaringan. Inilah sebabnya mengapa pemisahan kode dan pemuatan lambat adalah sangat bermanfaat.

Namun demikian, akan selalu ada sedikit penundaan yang harus dialami pengguna saat komponen pemisahan kode diambil melalui jaringan, jadi penting untuk menampilkan status pemuatan yang berguna. Menggunakan React.lazy dengan Suspense membantu memecahkan 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 React apa pun komponen sebagai status pemuatan. Contoh berikut menunjukkan cara kerjanya. Avatar hanya dirender saat tombol diklik, saat permintaan kemudian dibuat untuk mengambil kode yang diperlukan untuk AvatarComponent yang ditangguhkan. Sementara itu, komponen pemuatan penggantian ditampilkan.

Di sini, kode yang membentuk AvatarComponent kecil yaitu mengapa indikator lingkaran berputar pemuatan hanya muncul dalam waktu singkat. Lebih besar komponen membutuhkan waktu lebih lama untuk dimuat, terutama pada koneksi jaringan yang lemah.

Untuk menunjukkan dengan lebih baik cara kerjanya:

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
• Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
• Klik tab Jaringan.
• Klik dropdown Throttling, yang disetel ke No throttling secara default. Pilih 3G Cepat.
• Klik tombol Click Me di aplikasi.

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

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

Menangguhkan beberapa komponen

Fitur lain dari Suspense adalah Anda dapat menangguhkan beberapa agar tidak dimuat, meskipun semuanya dimuat dengan 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>
)

Cara ini sangat berguna untuk menunda rendering beberapa komponen sekaligus hanya menampilkan satu status pemuatan. Setelah semua komponen selesai pengambilan, pengguna dapat melihat semuanya ditampilkan pada saat yang sama.

Anda dapat melihatnya dengan sematan berikut:

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

Tanpanya, masalah pemuatan yang tidak tepat akan mudah terjadi, atau berbagai bagian UI yang dimuat satu per satu dan masing-masing memiliki indikator pemuatan. Hal ini dapat membuat pengalaman pengguna terasa lebih mengagetkan.

Catatan: Meskipun penggunaan Suspense untuk memisahkan komponen sudah dimungkinkan dan memudahkan untuk mengurangi ukuran paket, tim React terus mengerjakan lebih banyak fitur yang akan semakin memperluasnya. Roadmap React 16.x menjelaskan hal ini secara lebih mendetail.

Menangani kegagalan pemuatan

Suspense memungkinkan Anda menampilkan status pemuatan sementara saat terhubung ke jaringan dibuat di balik layar. Tetapi bagaimana jika permintaan jaringan itu gagal suatu alasan? Anda mungkin sedang offline, atau mungkin aplikasi web Anda mencoba memuat URL berversi secara lambat usang, dan tidak lagi tersedia setelah server di-deploy ulang.

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

Untuk mendeteksi dan menangani kegagalan pemuatan lambat, Anda dapat menggabungkan Suspense komponen dengan komponen induk yang berfungsi sebagai batas error. Di dalam batas error metode render(), Anda dapat merender turunan apa adanya jika tidak ada kesalahan, atau merender pesan kesalahan khusus 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 mulai menerapkan pemisahan kode ke React aplikasi, ikuti langkah-langkah berikut:

1. Memulai di tingkat rute. Rute adalah cara paling sederhana untuk mengidentifikasi titik aplikasi Anda yang dapat dipisah. Tujuan Dokumen reaksi menunjukkan bagaimana Suspense dapat digunakan bersama react-router.
2. Identifikasi komponen besar pada halaman di situs Anda yang hanya ditampilkan di interaksi pengguna tertentu (seperti mengklik tombol). Memisahkan komponen akan meminimalkan payload JavaScript Anda.
3. Pertimbangkan untuk memisahkan hal lain yang berada di balik layar dan tidak penting untuk .