Apakah aplikasi React Anda terlalu lambat atau terlalu lama dimuat? Jika demikian, Anda mungkin ingin menggunakan teknik yang dikenal sebagai pemecahan kode. Teknik ini sangat efektif untuk meningkatkan kecepatan memuat dan kinerja aplikasi React. Tapi apa itu pemecahan kode? Dan bagaimana cara melakukannya?

Apa itu Pemecahan Kode?

Aplikasi React umumnya terdiri dari lusinan komponen (dan kode). Tetapi Anda tidak perlu memuat sebagian besar komponen ini saat pertama kali memuatnya. Pemecahan kode memerlukan pemisahan bagian-bagian berbeda dari aplikasi Anda dan hanya memuatnya saat diperlukan. Ini jauh lebih efisien daripada memuat seluruh aplikasi sekaligus.

Pertimbangkan aplikasi React yang memiliki tiga halaman: beranda, halaman tentang, dan halaman produk. Saat Anda berada di beranda, tidak ada gunanya memuat halaman tentang atau halaman produk. Karena Anda belum benar-benar berada di halaman tersebut. Gagasan pemecahan kode adalah untuk memastikan Anda memuat kode hanya saat dibutuhkan.

Buka halaman web di browser web Anda, lalu buka DevTools (Anda dapat mengklik F12 di keyboard untuk membukanya di Google Chrome). Selanjutnya, buka tab Sumber. Di sana Anda akan menemukan semua kode yang diunduh saat Anda menavigasi ke halaman. Tanpa pemecahan kode, browser mengunduh semua file dalam proyek Anda saat halaman awal dimuat. Ini dapat memperlambat situs web Anda jika berisi banyak file.

Pemecahan kode menjadi sangat berguna saat proyek Anda mulai menjadi semakin besar. Ini karena mengunduh seluruh file aplikasi sekaligus bisa memakan waktu yang sangat lama. Jadi membaginya akan sangat bermanfaat.

Bagian terbaik tentang pemecahan kode adalah Anda dapat menunda pemuatan komponen dan juga fungsi. Kita panduan pengantar tentang ReactJS menjelaskan komponen dan fungsi secara mendalam jika Anda membutuhkan penyegaran.

Fungsi Pemisahan Kode: Menggunakan Impor Dinamis

Pertimbangkan situasi berikut. Anda ingin beranda Anda memiliki tombol. Saat Anda mengklik tombol, Anda ingin mengingatkan jumlah 2 dan 2 (yaitu 4). Jadi Anda membuat Beranda.js komponen dan tentukan tampilan beranda Anda.

Dalam hal ini, Anda memiliki dua opsi. Pertama, Anda dapat mengimpor kode untuk menambahkan angka di bagian atas Beranda.js mengajukan. Tapi inilah masalahnya. Jika Anda mengimpor fungsi di bagian atas file, maka kode akan dimuat meskipun Anda belum mengklik tombolnya. Pendekatan yang lebih baik adalah memuat file jumlah() berfungsi hanya ketika Anda mengklik tombol.

Untuk mencapai ini, Anda harus melakukan impor dinamis. Ini berarti bahwa Anda akan mengimpor jumlah() fungsi sebaris di elemen tombol. Berikut kode untuk hal yang sama:

eksporbawaanfungsiRumah() { 
kembali ( 
"Rumah"> 
Beranda</h1>
 {
impor("../sum.js").Kemudian((modul) => {
 peringatan(modul.jumlah(2, 2))
 })
 }}
 >
 Jumlahkan kedua angka
 </button> 
 </div> 
 ); 
}

Sekarang browser hanya akan mengunduh sum.js modul ketika Anda mengklik tombol. Ini meningkatkan waktu pemuatan beranda.

Komponen Pemecah Kode: Menggunakan React.lazy dan Suspense

Anda dapat membagi komponen di React menggunakan malas() fungsi. Tempat terbaik untuk melakukan pemecahan kode adalah di dalam router Anda. Karena ini adalah tempat Anda memetakan komponen ke rute di aplikasi Anda. Anda dapat membaca panduan kami di cara membuat aplikasi satu halaman dengan React Router jika Anda membutuhkan penyegaran.

Misalkan aplikasi Anda memiliki Rumah, Tentang, Dan Produk komponen. Ketika Anda berada di Rumah komponen, tidak ada gunanya memuat Tentang komponen atau Produk komponen. Jadi, Anda perlu memisahkannya dari Rumah rute. Kode berikut menunjukkan cara mencapainya:

Pertama, Anda perlu mengimpor fungsi dan komponen yang diperlukan dari reaksi Dan react-router-dom modul:

impor { Rute, Rute, Outlet, Tautan } dari"bereaksi-router-dom";
impor { malas, Ketegangan } dari"reaksi";

Selanjutnya, Anda perlu mengimpor komponen secara dinamis menggunakan malas() fungsi:

const Rumah = malas(() =>impor("./komponen/Beranda"));
const Tentang = malas(() =>impor("./komponen/Tentang"));
const Produk = malas(() =>impor("./komponen/Produk"));

Selanjutnya, atur tata letak (menu navigasi). Menggunakan komponen untuk merender komponen yang sesuai dengan rute saat ini (Rumah, Tentang, atau Produk komponen):

fungsiNavWrapper() {
kembali (
 <>

Anda dapat melihat bahwa kami membungkus komponen di dalamnya. Ini memberi tahu React bahwa semua yang ada di dalamnya memiliki potensi untuk dimuat dengan lambat, yang berarti mungkin tidak segera tersedia. Untuk alasan ini, Ketegangan komponen memiliki a cadangan Properti. Dalam kasus kami, nilainya adalah teks sederhana yang bertuliskan "Memuat...". Jadi saat setiap halaman sedang diunduh, itu akan mengatakan memuat di layar.

Terakhir, atur rutenya:

eksporbawaanfungsiAplikasi() {
kembali (

"/" elemen={}>
"/" elemen={} />
"/produk" elemen={} />
"/tentang" elemen={} />
 </Route>
 </Routes>
 );
}

Sekarang ketika Anda mengunjungi beranda, browser hanya memuat Beranda.js mengajukan. Dengan cara yang sama, ketika Anda mengklik Tentang tautan di menu navigasi untuk mengunjungi halaman Tentang, browser hanya memuat Tentang.js mengajukan. Ini sama untuk halaman Produk.

Pemisahan Kode Bersyarat

Seringkali Anda mungkin memiliki konten di halaman Anda yang hanya berlaku untuk pengguna tertentu. Misalnya, di beranda Anda, Anda dapat memiliki bagian dengan data admin yang eksklusif untuk pengguna admin. Ini bisa jadi dasbor admin yang muncul untuk pengguna admin, tetapi tidak untuk pengguna biasa.

Dalam hal ini, Anda tidak ingin menampilkan semua data itu setiap saat. Dalam hal ini, Anda dapat menggunakan teknik pemecahan kode untuk memastikan bahwa Anda hanya menampilkan informasi tersebut jika orang tersebut adalah admin.

Berikut tampilan kode tersebut:

impor { malas, Ketegangan } dari"reaksi";
const AdminData = malas(() =>impor("./AdminData"));
eksporbawaanfungsiRumah() { 
const [isAdmin, setIsAdmin] = useState(PALSU)
kembali ( 

"Rumah"> 
Beranda</h1>
 setIsAdmin(sebelumnya => !prev)}>
 Beralih Admin
 </button> 

Memuat...</h1>}>
 {adalahAdmin? <AdminData />: <h2> Bukan Adminnya h2>} 
 </Suspense>
 </div> 
 ); 
}

Sekarang, ketika Anda mengklik tombol sakelar, isAdmin akan diatur ke BENAR. Hasilnya, aplikasi akan menampilkan yang dimuat dengan malas. Tetapi jika Anda bukan pengguna admin, aplikasi tidak akan pernah diunduh AdminData.js karena itu tidak akan membutuhkannya.

Pemisahan kode bersyarat menggunakan konsep yang sama dengan rendering bersyarat di React.

Konsep Pemisahan Kode Tingkat Lanjut

Salah satu teknik lanjutan yang dapat Anda aktifkan saat memisahkan kode adalah transisi. Itu useTransition() hook memungkinkan Anda untuk melakukan pembaruan tidak mendesak yang tidak akan mengubah UI Anda sampai pembaruan selesai.

Pertama, Anda mengimpor pengait:

impor {useTransition} dari"reaksi"

Kemudian Anda memanggil pengait, yang kembali sedang menunggu Dan startTransition:

const [isPending, startTransition] = useTransition()

Terakhir, bungkus kode untuk memperbarui status Anda di dalamnya mulaiTransisi():

mulai Transisi(() => {
 setIsAdmin((sebelumnya) => !sebelumnya)
})

Sekarang UI Anda yang sebenarnya tidak akan menampilkan nilai mundur (memuat teks) hingga browser menyelesaikan transisi. Artinya, browser akan menunggu untuk mengunduh seluruh data admin sebelum mencoba menampilkan data sama sekali.

Cara Lain untuk Mengoptimalkan Performa React

Artikel ini membahas pemecahan kode sebagai metode untuk meningkatkan kinerja aplikasi React Anda. Tetapi ada beberapa metode lain juga yang dapat memberi Anda pengetahuan yang dibutuhkan untuk membuat aplikasi yang tangguh.