Memahami React Lazy Loading

Mari kita pahami dengan memecah kata terlebih dahulu

Malas – tidak mau, memuat – mengunduh kode ke browser.

Pemuatan malas – tidak mau mengunduh atau memuat kode untuk beberapa waktu.

Untuk memahami atau mempelajari sesuatu kita perlu memiliki jawaban atas dua pertanyaan yaitu Mengapa? Bagaimana?

Mari kita pahami Mengapa Lazy loading diperlukan?

Setiap kali kami memuat aplikasi, pada saat pemuatan awal jika aplikasi memiliki basis kode yang sangat besar, maka perlu waktu untuk memuat atau mengunduh semua kode. Ini menghasilkan pengalaman pengguna yang buruk.

Untuk mengatasi masalah ini, lazy loading yaitu tidak memuat beberapa kode sampai diperlukan, sehingga pada saat loading awal hanya komponen yang perlu dimuat yang diunduh, dan komponen yang tidak diinginkan tidak dimuat.

Bagaimana cara mencapai pemuatan lambat di Bereaksi?

Dalam Javascript ada konsep yang disebut impor dinamis, di mana ketika kita menjalankan fungsi impor (impor bukan fungsi yaitu tidak mewarisi prototipe Fungsi) ia mengembalikan Promise yang ketika diselesaikan, mengembalikan data yang diekspor yang diperlukan.

Konsep impor dinamis ini digunakan dalam fungsi React.lazy.

Di Bereaksi ada fungsi malas yang menjadikannya fungsi panggilan balik. Dalam fungsi panggilan balik itu kami menggunakan impor dinamis.

Sintaksnya seperti di bawah ini.

const ExportedComponent = React.lazy(() => import(path));

Tetapi impor dinamis adalah async, jadi jika kita langsung menggunakan ExportedComponent dapat menyebabkan kesalahan, karena fungsi malas async akan mengembalikan janji, dan Janji tidak dapat digunakan sebagai

Komponen, Jadi kami menggunakan komponen yang disebut Suspense, dan ia memiliki penyangga cadangan yang mengambil komponen untuk dirender saat komponen yang diperlukan tidak dimuat.

Sintaksnya seperti di bawah ini.

<React.Suspense fallback='loading'> <ExportedComponent /> </ React.Suspense>

Kesimpulan

Lazy Loading sangat berguna ketika basis kode sangat besar dan banyak membantu dalam meningkatkan kinerja.

Sintaks Bereaksi terbaru untuk pemuatan lambat sangat mudah digunakan.