React Prestasi Apl dengan Lazy Loading

pengenalan

Dalam dunia moden pembangunan web, kelajuan dan prestasi adalah kunci. Apabila apl React anda berkembang, saiz berkasnya bertambah, yang boleh melambatkan masa pemuatan. Pemuatan malas ialah teknik pengoptimuman yang membolehkan anda memuatkan komponen hanya apabila ia diperlukan, membantu anda mengurangkan masa pemuatan awal dan meningkatkan prestasi.

Apa itu Lazy Loading?

Pemuatan malas (atau pemisahan kod) ialah amalan menangguhkan pemuatan sumber (seperti komponen) sehingga ia benar-benar diperlukan. Ini membantu dalam meningkatkan prestasi apl dengan mengurangkan saiz beban awal.

Sebagai contoh, dalam apl berbilang halaman, tidak perlu memuatkan komponen untuk semua laluan di hadapan. Anda boleh memuatkannya apabila pengguna menavigasi ke laluan tertentu. Ini mengurangkan saiz berkas awal dan menambah baik masa muat, terutamanya pada rangkaian yang lebih perlahan.

Kenapa Lazy Loading Penting?

1. Mengurangkan Masa Muatan Permulaan: Dengan memuatkan hanya komponen penting dahulu, saiz berkas awal lebih kecil, menghasilkan masa pemuatan yang lebih cepat.

2. Penggunaan Lebar Jalur Dioptimumkan: Sumber yang tidak diperlukan tidak diambil sehingga diperlukan, mengurangkan penggunaan data.

3. Pengalaman Pengguna yang Dipertingkat: Memuatkan apl yang lebih pantas memberikan pengalaman pengguna yang lebih baik, yang membawa kepada pengekalan dan penglibatan pengguna yang lebih tinggi.

---

Cara Melaksanakan Lazy Loading dalam React

React mempunyai sokongan terbina dalam untuk memuatkan malas menggunakan React.lazy dan Suspense, yang diperkenalkan dalam React 16.6.

Contoh Asas dengan React.lazy dan Suspense

1. Mengimport Komponen Biasanya:

   import MyComponent from './MyComponent';

Dalam kes ini, MyComponent dimuatkan sebagai sebahagian daripada berkas awal.

1. Malas Memuatkan Komponen: Gunakan React.lazy untuk memuatkan komponen secara dinamik hanya apabila ia diperlukan:

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

1. Menggunakan Suspense untuk Fallback: Memandangkan komponen malas memuatkan mengambil masa, React menyediakan komponen Suspense untuk menunjukkan UI sandaran (seperti pemutar pemuatan) semasa komponen yang dimuatkan malas sedang diambil.

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       

         Loading...
}>
           
         
       

); } export default App;

Salin selepas log masuk

Dalam contoh ini, apabila MyComponent diperlukan, React mengimportnya secara dinamik dan menunjukkan mesej memuatkan sehingga komponen itu sedia.

---

Lazy Loading Routes

Pemuatan malas amat berguna untuk aplikasi besar dengan berbilang laluan. React Router membenarkan pemuatan malas komponen laluan dengan mudah.

1. Pasang react-router-dom jika anda belum melakukannya:

   npm install react-router-dom

1. Berikut ialah contoh cara malas memuatkan laluan:

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

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

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

Dalam contoh ini, komponen Laman Utama dan Perihal dimuatkan secara malas hanya apabila laluan masing-masing dilawati.

---

Petua Lanjutan untuk Malas Memuatkan

1. Pramuat Komponen: Kadangkala, anda mungkin mahu pramuat komponen sebelum ia diperlukan (cth., semasa menuding pada pautan). Ini boleh dilakukan dengan mengimport komponen secara dinamik apabila syarat tertentu dipenuhi.

   const preloadAbout = () => {
     import('./pages/About');
   };

1. Penamaan Bongkahan: Pek web membolehkan anda menamakan bongkah apabila menggunakan pemuatan malas, yang boleh membantu untuk penyahpepijatan dan pemantauan prestasi.

   const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

1. Sempadan Ralat: Pemuatan malas mungkin gagal disebabkan oleh isu rangkaian. Menggunakan sempadan ralat akan membantu mengendalikan kes sedemikian dengan anggun.

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

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

     render() {
       if (this.state.hasError) {
         return <div>Error loading component!</div>;
       }
       return this.props.children;
     }
   }

   // Usage
   <ErrorBoundary>
     <Suspense fallback={<div>Loading...</div>}>
       <MyComponent />
     </Suspense>
   </ErrorBoundary>

---

Pertimbangan Prestasi

Walaupun malas memuatkan boleh meningkatkan prestasi dengan ketara, ia harus digunakan secara strategik. Melebihkan aplikasi dengan terlalu banyak komponen yang dimuatkan secara malas boleh memperkenalkan kependaman apabila menavigasi antara laluan atau komponen pemaparan. Sentiasa mengimbangi pemuatan malas dengan pengalaman pengguna untuk mengelakkan pemuatan "terlalu banyak" semasa masa jalan.

---

Kesimpulan

Pemuatan malas ialah cara yang berkesan untuk meningkatkan prestasi aplikasi React anda. Dengan memuatkan komponen hanya apabila ia diperlukan, anda boleh mengurangkan saiz berkas awal, menjimatkan lebar jalur dan memberikan pengalaman yang lebih baik untuk pengguna.

Melaksanakan pemuatan malas adalah mudah dengan React.lazy dan Suspense, dan apabila digabungkan dengan Penghala React, anda boleh memuatkan laluan secara malas dalam apl anda dengan cekap. Gunakan teknik ini untuk mengoptimumkan apl React anda hari ini!

---

Sumber Tambahan

• React Docs: Pemisahan Kod
• Dokumen Pek Web: Import Dinamik

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