Pemisahan Kod dengan React.lazy dan Suspense

Dalam pembangunan web moden, prestasi adalah yang terpenting. Pengguna mengharapkan aplikasi pemuatan pantas, dan salah satu strategi paling berkesan untuk mencapainya ialah melalui pemisahan kod. Pemisahan kod membolehkan anda memecahkan aplikasi anda kepada bahagian yang lebih kecil, memuatkan hanya kod yang diperlukan apabila diperlukan. Artikel ini meneroka cara melaksanakan pemisahan kod dalam React menggunakan React.lazy dan Suspense.

Memahami Pemisahan Kod

Pembahagian kod ialah proses membahagikan aplikasi anda kepada berkas yang lebih kecil yang boleh dimuatkan atas permintaan. Ini amat penting untuk aplikasi besar, di mana penghantaran satu berkas JavaScript besar-besaran boleh menyebabkan masa muat yang perlahan dan pengalaman pengguna yang buruk. Dengan membahagikan kod anda, anda boleh memastikan bahawa pengguna hanya memuat turun kod yang mereka perlukan, apabila mereka memerlukannya.

Peranan Bundling

Kebanyakan aplikasi React menggunakan pengikat seperti Webpack, Rollup atau Browserify untuk menggabungkan fail menjadi satu himpunan. Walaupun penggabungan adalah cekap, ia boleh membawa kepada saiz fail yang besar apabila aplikasi anda berkembang. Pemisahan kod membantu mengurangkan isu ini dengan membenarkan anda memuatkan bahagian aplikasi anda sahaja yang diperlukan.

Import Dinamik

Sintaks import() dinamik ialah asas pemisahan kod dalam JavaScript. Ia membolehkan anda memuatkan modul secara tidak segerak, yang penting untuk melaksanakan pemisahan kod dalam React.

// Before code splitting
import { add } from './math';

console.log(add(16, 26));

// After code splitting
import("./math").then(math => {
  console.log(math.add(16, 26));
});

Apabila menggunakan import(), pengikat secara automatik mencipta ketulan berasingan untuk modul yang diimport.

Menggunakan React.malas

React menyediakan cara terbina dalam untuk melaksanakan pemisahan kod pada peringkat komponen melalui React.lazy. Fungsi ini membolehkan anda menentukan komponen yang akan dimuatkan secara dinamik.

Contoh:

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
);

Dalam contoh ini, AvatarComponent hanya akan dimuatkan apabila DetailsComponent dipaparkan, mengurangkan masa pemuatan awal.

Memperkenalkan Suspense

Semasa React.lazy mengendalikan pemuatan komponen, ia tidak menguruskan keadaan pemuatan. Di sinilah Suspense masuk. Suspens membolehkan anda menentukan UI sandaran yang akan dipaparkan semasa komponen yang dimuatkan malas sedang diambil.

Contoh:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
);

Dalam contoh ini, semasa AvatarComponent sedang dimuatkan, pengguna akan melihat mesej "Memuatkan...". Ini meningkatkan pengalaman pengguna dengan memberikan maklum balas semasa proses pemuatan.

Mengendalikan Pelbagai Komponen

Suspense juga boleh menguruskan berbilang komponen yang dimuatkan secara malas secara serentak. Ini berguna untuk mengurangkan bilangan penunjuk pemuatan yang dipaparkan kepada pengguna.

Contoh:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
  </Suspense>
);

Dalam kes ini, kedua-dua komponen akan dimuatkan bersama, dan pengguna akan melihat penunjuk pemuatan tunggal sehingga kedua-duanya bersedia.

Sempadan Ralat

Apabila berurusan dengan komponen yang dimuatkan malas, adalah penting untuk menangani kemungkinan kegagalan pemuatan. React menyediakan corak untuk ini melalui sempadan ralat. Sempadan ralat boleh menangkap ralat semasa pemaparan dan memaparkan UI sandaran.

Contoh:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }
    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<p>Loading...</p>}>
      <AvatarComponent />
    </Suspense>
  </ErrorBoundary>
);

Dalam contoh ini, jika AvatarComponent gagal dimuatkan, pengguna akan melihat mesej ralat mesra dan bukannya UI yang rosak.

Pemisahan Kod Berasaskan Laluan

Salah satu tempat paling berkesan untuk melaksanakan pemisahan kod adalah pada peringkat laluan. Ini amat berguna dalam aplikasi satu halaman (SPA) yang laluan berbeza boleh memuatkan komponen yang berbeza.

Contoh:

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

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

Dalam contoh ini, komponen Laman Utama dan Perihal dimuatkan hanya apabila laluan masing-masing diakses, mengoptimumkan masa muat awal.

Kesimpulan

Pecah kod ialah teknik berkuasa yang boleh meningkatkan prestasi aplikasi React anda dengan ketara. Dengan menggunakan React.lazy dan Suspense, anda boleh melaksanakan pemisahan kod dengan mudah pada peringkat komponen, memastikan pengguna hanya memuat turun kod yang mereka perlukan. Ini bukan sahaja meningkatkan masa muat tetapi juga meningkatkan keseluruhan pengalaman pengguna.

Sambil anda membangunkan aplikasi React anda, pertimbangkan tempat anda boleh menggunakan pemisahan kod untuk mengoptimumkan prestasi. Mulakan dengan pemisahan berasaskan laluan dan kenal pasti komponen besar yang boleh dimuatkan atas permintaan. Dengan strategi ini, anda boleh mencipta aplikasi yang pantas dan cekap yang menggembirakan pengguna anda.

Ikuti saya untuk mendapatkan lebih banyak cerapan tentang React, TypeScript dan amalan pembangunan web moden!?‍?

Atas ialah kandungan terperinci Pemisahan Kod dengan React.lazy dan Suspense. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!