Panduan langkah demi langkah untuk melaksanakan pemuatan malas dan pemisahan kod dalam projek React

Berikut ialah panduan langkah demi langkah untuk melaksanakan pemuatan malas dan pemisahan kod dalam projek React. Kami akan mencipta aplikasi mudah dengan dua laluan, memuatkan komponen dengan malas.

Langkah 1: Buat Apl React Baharu

Jika anda belum berbuat demikian, buat apl React baharu menggunakan Apl Cipta React:

npx create-react-app lazy-loading-example
cd lazy-loading-example

Langkah 2: Pasang Penghala Reaksi

Pasang react-router-dom untuk penghalaan:

npm install react-router-dom

Langkah 3: Sediakan Lazy Loading dan Pemisahan Kod

Buat Komponen

1. Buat folder bernama komponen di dalam direktori src.
2. Di dalam komponen, buat dua fail: Home.js dan About.js.

Home.js

import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

Mengenai.js

import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

Kemas kini App.js

Sekarang, ubah suai fail App.js anda untuk melaksanakan pemuatan dan penghalaan malas:

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

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Langkah 4: Jalankan Aplikasi Anda

Sekarang, jalankan aplikasi anda untuk melihatnya dalam tindakan:

npm start

Langkah 5: Uji Lazy Loading

1. Buka penyemak imbas anda dan navigasi ke http://localhost:3000.
2. Klik pada pautan "Rumah" untuk melihat beban komponen Rumah.
3. Klik pada pautan "Perihal" untuk melihat komponen Perihal dimuatkan dengan malas.

Perkara Utama

• React.lazy digunakan untuk mengimport komponen secara dinamik, yang dimuatkan hanya apabila ia dipaparkan.
• Suspense digunakan untuk mengendalikan keadaan pemuatan, memaparkan sandaran semasa komponen yang dimuatkan malas sedang diambil.
• Pendekatan ini mengurangkan masa muat awal dengan ketara dengan membahagikan kod kepada bahagian yang lebih kecil.

Penambahbaikan Tambahan

Anda boleh meningkatkan lagi persediaan anda dengan:

• Melaksanakan sempadan ralat di sekeliling komponen anda yang dimuatkan dengan malas untuk menangkap ralat pemuatan.
• Menggunakan strategi penghalaan lanjutan dengan Penghala Reaksi untuk aplikasi yang lebih besar.

Jika anda memerlukan ciri yang lebih khusus atau bantuan tambahan, beritahu saya!

Atas ialah kandungan terperinci Panduan langkah demi langkah untuk melaksanakan pemuatan malas dan pemisahan kod dalam projek React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!