Anda tidak perlu mengirimkan kode lebih dari yang diperlukan kepada pengguna. Jadi, bagi paket Anda untuk memastikan hal ini tidak terjadi.
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.
![Panel jaringan DevTools menampilkan satu file chunk.js yang sedang didownload](https://web.dev/static/articles/code-splitting-suspense/image/devtools-network-panel-sh-bab60da5120ad.png?authuser=19&hl=id)
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:
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.
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:
- 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 bersamareact-router
. - 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.
- Pertimbangkan untuk memisahkan hal lain yang berada di balik layar dan tidak penting untuk .