Pemisahan Kod dengan React.lazy dalam React

Pemisahan Kod ialah teknik untuk mengoptimumkan prestasi aplikasi React dengan memecahkan berkas JavaScript kepada bahagian yang lebih kecil. React menyediakan React.lazy sebagai cara terbina dalam untuk melaksanakan pemisahan kod pada peringkat komponen. Ini membolehkan anda memuatkan bahagian aplikasi anda secara dinamik mengikut keperluan.

Cara Pemisahan Kod Berfungsi dengan React.lazy

1. Import Dinamik: Menggunakan import ES6() untuk memuatkan komponen secara dinamik.
2. Himpunan Lebih Kecil: Pecahkan apl kepada himpunan yang lebih kecil, mengurangkan masa pemuatan awal.
3. Pemuatan Asynchronous: Memuatkan komponen secara tak segerak hanya apabila diperlukan.

Sintaks

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

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

• React.lazy: Mengimport komponen yang ditentukan secara dinamik.
• Suspense: Menyediakan UI sandaran semasa komponen sedang dimuatkan.

Contoh 1: Pemisahan Kod Asas dengan React.lazy

Tanpa Pemisahan Kod

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

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

export default App;

Dalam pendekatan ini, keseluruhan HeavyComponent digabungkan dengan apl utama, walaupun ia tidak diperlukan segera.

Dengan Pemisahan Kod

import React, { Suspense } from "react";

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

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

export default App;

Kini, HeavyComponent hanya dimuatkan apabila ia dipaparkan. Ini mengurangkan saiz berkas awal.

Contoh 2: Pemisahan Kod dalam Laluan

Pembahagian kod berfungsi dengan lancar dengan Penghala Reaksi untuk memuatkan komponen laluan secara dinamik.

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;

Faedah:

• Setiap komponen laluan (Rumah, Perihal, Kenalan) dimuatkan hanya apabila laluan yang sepadan diakses.

Contoh 3: Malas Memuatkan Pelbagai Komponen

Malas memuatkan berbilang komponen dalam satu apl dengan pemisahan logik.

import React, { Suspense, useState } from "react";

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

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

Pengendalian Ralat dengan React.lazy

React tidak menyediakan pengendalian ralat terbina dalam untuk import yang gagal. Anda boleh menggunakan Sempadan Ralat untuk mengendalikan kes sedemikian.

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

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

Amalan Terbaik untuk Pemisahan Kod

1. Pisah Mengikut Laluan atau Ciri: Pecahkan apl anda kepada bahagian logik, seperti laluan atau ciri utama.
2. Pastikan Fallback Minimal: Gunakan UI sandar yang ringan seperti pemutar atau mesej teks.
3. Pantau Saiz Bundle: Gunakan alatan seperti Webpack Bundle Analyzer untuk mengenal pasti komponen besar.
4. Elakkan Terlalu Memisahkan: Seimbangkan antara bilangan ketulan dan prestasi; terlalu banyak bahagian boleh menyebabkan permintaan HTTP meningkat.

Alat untuk Meningkatkan Pemisahan Kod

1. Webpack: Menyokong import dinamik untuk pemisahan kod.
2. Vite: Menawarkan binaan pantas dan pemisahan kod automatik.
3. Penghala Reaksi: Membolehkan penyepaduan mudah dengan pemuatan malas berasaskan laluan.
4. React Boleh Dimuat: Pustaka pihak ketiga untuk kawalan yang dipertingkatkan ke atas pemuatan malas.

Kesimpulan

Pembahagian kod dengan React.lazy ialah cara yang berkesan untuk meningkatkan prestasi apl anda. Dengan memuatkan komponen secara dinamik, anda boleh mengurangkan masa pemuatan awal dan meningkatkan pengalaman pengguna. Apabila digabungkan dengan Suspense dan pengendalian ralat yang betul, ia menyediakan penyelesaian yang teguh untuk membina aplikasi React yang cekap dan berskala.

Atas ialah kandungan terperinci Pemisahan Kod dengan React.lazy: Tingkatkan Prestasi Apl Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!