Mengoptimumkan Prestasi dengan Lazy Loading dalam React Router v6

Malas Memuatkan dengan React Router v6

Pemuatan malas ialah teknik dalam pembangunan web yang membolehkan anda memuatkan komponen hanya apabila ia diperlukan, dan bukannya memuatkan semuanya terlebih dahulu. Ini amat berguna dalam aplikasi besar yang memuatkan semua komponen sekaligus boleh melambatkan pemuatan halaman awal.

React Router v6 berfungsi dengan lancar dengan React.lazy terbina dalam dan Suspense untuk melaksanakan pemuatan malas laluan. Dengan menggunakan ciri ini, anda boleh meningkatkan prestasi apl anda dan pengalaman pengguna dengan memuatkan komponen hanya apabila pengguna menavigasi ke ciri tersebut.

---

Cara Lazy Loading Berfungsi dalam React Router v6

Dalam React, React.lazy digunakan untuk mengimport komponen secara dinamik, dan Suspense digunakan untuk membalut komponen yang dimuatkan dengan malas semasa ia diambil. React Router v6 memudahkan untuk menyepadukan konsep ini untuk memuatkan laluan dengan malas.

Langkah untuk Melaksanakan Lazy Loading dalam React Router v6:

1. Gunakan React.lazy to Lazy Load Komponen

   • React.lazy membolehkan anda menentukan komponen yang dimuatkan hanya apabila laluan itu diakses.

2. Gunakan Suspense untuk Membungkus Komponen Lazy Loaded

   • Suspens digunakan untuk menentukan UI sandaran (seperti pemutar pemuatan) semasa komponen sedang dimuatkan.

---

Contoh: Lazy Loading dengan React Router v6

Langkah 1: Pasang Ketergantungan yang Diperlukan

Pastikan anda telah memasang React Router v6:

npm install react-router-dom@6

Langkah 2: Tentukan Komponen Lazy Loaded Anda

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// Lazy load components using React.lazy
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));

// Fallback UI component to show while lazy-loaded component is loading
const FallbackLoader = () => <div>Loading...</div>;

const App = () => {
  return (
    <router>
      <suspense fallback="{<FallbackLoader"></suspense>}>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
          <route path="/contact" element="{<Contact"></route>} />
        </routes>
      
    </router>
  );
};

export default App;

Penjelasan:

1. React.lazy(() => import('./Home')):

   • React.lazy mengimport komponen secara dinamik hanya apabila ia diperlukan, mengurangkan saiz berkas awal aplikasi anda.
   • Ini dilakukan untuk komponen Rumah, Perihal dan Kenalan dalam contoh.

2. Saspens:

   • Komponen Suspense dililit di seluruh sekat untuk menyediakan UI sandaran () apabila komponen yang dimuatkan malas sedang diambil.
   • Ini memastikan bahawa pemutar pemuatan atau mesej muncul semasa komponen sedang dimuatkan.

3. Sandaran Prop dalam Suspen:

   • Prop sandaran menentukan UI yang harus dipaparkan semasa komponen yang dimuatkan malas sedang diambil (dalam kes ini, ia adalah mesej pemuatan yang mudah).

---

Malas Memuatkan dengan Laluan Bersarang

Pemuatan malas juga boleh digunakan pada laluan bersarang, meningkatkan masa muat untuk halaman dengan komponen bersarang.

npm install react-router-dom@6

Penjelasan:

• Di sini, komponen Papan Pemuka, Gambaran Keseluruhan Papan Pemuka dan Tetapan Papan Pemuka dimuatkan secara malas apabila laluan yang sepadan diakses.
• Komponen Suspense membungkus laluan untuk menunjukkan keadaan pemuatan sandaran semasa komponen bersarang ini sedang dimuatkan.

---

Amalan Terbaik untuk Pemuatan Malas dalam Penghala Reaksi v6

1. Chunking dan Pemisahan Kod: Penghala Reaksi membolehkan anda membahagikan apl anda kepada beberapa bahagian, dengan setiap laluan menjadi satu berkas berasingan yang boleh dimuatkan atas permintaan. Ini mengurangkan masa pemuatan awal dan mempercepatkan apl.

2. Gunakan Fallback dengan Bijak: Pastikan UI fallback memberikan pengalaman pengguna yang baik. Pemintal pemuatan ringkas atau teks biasanya sudah mencukupi, tetapi anda boleh menyesuaikannya lagi.

3. Pramuat Laluan Kritikal: Untuk halaman kritikal yang pengguna mungkin akan menavigasi terlebih dahulu, pertimbangkan untuk pramuat laluan ini di latar belakang supaya ia bersedia apabila pengguna menavigasi ke laluan tersebut.

4. Hadkan Pemuatan Malas: Gunakan pemuatan malas untuk komponen yang tidak kritikal. Jangan terlalu menggunakan pemuatan malas untuk komponen kecil yang tidak akan menjejaskan masa pemuatan awal dengan ketara.

---

Kesimpulan

Lazy loading dalam React Router v6, dikuasakan oleh React.lazy dan Suspense, membantu mengoptimumkan prestasi aplikasi React anda dengan memuatkan komponen hanya apabila ia diperlukan. Ia meningkatkan pengalaman pengguna dengan mengurangkan masa muat awal dan membolehkan anda mengurus aplikasi besar dengan cekap.

Dengan menggabungkan React.lazy untuk pemisahan kod dan Suspense untuk UI sandaran, React Router v6 memudahkan untuk melaksanakan pemuatan malas untuk laluan peringkat atas dan laluan bersarang.

---

Atas ialah kandungan terperinci Mengoptimumkan Prestasi dengan Lazy Loading dalam React Router v6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!