Tingkatkan Prestasi Apl React dengan Komponen Lazy Loading

Komponen Malas Memuatkan dalam React

Lazy Loading ialah teknik dalam React yang membolehkan anda memuatkan komponen hanya apabila ia diperlukan. Ini membantu meningkatkan prestasi aplikasi anda dengan mengurangkan masa pemuatan awal, kerana hanya bahagian apl yang diperlukan dimuatkan pada mulanya dan selebihnya dimuatkan secara dinamik apabila perlu.

React menyediakan fungsi React.lazy dan komponen Suspense untuk melaksanakan pemuatan malas.

Bagaimana Lazy Loading Berfungsi

1. React.lazy: Mengimport komponen secara dinamik.
2. Suspense: Memaparkan sandaran (cth., pemutar pemuatan) semasa komponen sedang dimuatkan.

Sintaks

const LazyComponent = React.lazy(() => import('./path/to/Component'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

• React.lazy: Mengimport komponen yang ditentukan secara dinamik.
• Suspense: Membungkus komponen yang dimuatkan dengan malas dan menyediakan UI sandaran semasa komponen sedang dimuatkan.

Contoh 1: Pemuatan Malas Asas

Tanpa Lazy Loading

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

Dalam contoh ini, HeavyComponent sentiasa dimuatkan, walaupun ia tidak diperlukan serta-merta, meningkatkan masa pemuatan awal.

Dengan Lazy Loading

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Kini, HeavyComponent dimuatkan hanya apabila ia dipaparkan. UI sandaran (cth., "Memuatkan Komponen Berat...") dipaparkan semasa komponen sedang diambil.

Contoh 2: Lazy Loading dengan React Router

Pemuatan malas amat berguna dalam penghalaan untuk memuatkan komponen untuk laluan tertentu hanya apabila laluan tersebut diakses.

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

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

• React.lazy: Malas memuatkan komponen untuk laluan seperti /about dan /contact.
• Suspense: Memaparkan UI sandaran semasa komponen sedang dimuatkan.

Kebaikan Lazy Loading

1. Peningkatan Prestasi: Mengurangkan masa pemuatan awal dengan menangguhkan pemuatan komponen yang tidak diperlukan.
2. Pengalaman Pengguna yang Lebih Baik: Memuatkan komponen secara dinamik, yang membantu dalam mencipta apl responsif.
3. Saiz Himpunan Dikurangkan: Pisahkan kod kepada bahagian yang lebih kecil, meminimumkan saiz berkas JavaScript yang dimuatkan pada mulanya.

Contoh Lanjutan: Malas Memuatkan Pelbagai Komponen

Anda boleh malas memuatkan berbilang komponen dan menggabungkannya dengan pemaparan bersyarat.

const LazyComponent = React.lazy(() => import('./path/to/Component'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

Ralat Pengendalian dengan Lazy Loading

Jika komponen yang dimuatkan malas gagal dimuatkan (mis., ralat rangkaian), React tidak menyediakan pengendalian ralat terbina dalam untuk memuatkan malas. Anda boleh menggunakan ErrorBoundary untuk mengendalikan senario sedemikian.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

Amalan Terbaik untuk Lazy Loading

1. Kekalkan Fallbacks Simple: Gunakan UI fallback yang ringan seperti pemutar atau mesej teks.
2. Bahagian Komponen Dengan Bijak: Pisahkan komponen secara logik, seperti mengikut laluan atau mengikut ciri.
3. Gabungkan dengan Pemisahan Kod: Gunakan alatan seperti Webpack atau Vite untuk pemisahan kod yang berkesan.

Kesimpulan

Pemuatan malas dalam React ialah cara yang berkesan untuk meningkatkan prestasi aplikasi dan mengoptimumkan pengalaman pengguna. Dengan memuatkan komponen secara dinamik menggunakan React.lazy dan Suspense, anda boleh mengurangkan masa pemuatan awal dan memastikan bahawa hanya bahagian yang diperlukan dalam aplikasi anda diambil.

Atas ialah kandungan terperinci Tingkatkan Prestasi Apl React dengan Komponen Lazy Loading. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!