Rumah hujung hadapan web tutorial js Mengoptimumkan Prestasi dengan Lazy Loading dalam React Router v6

Mengoptimumkan Prestasi dengan Lazy Loading dalam React Router v6

Dec 24, 2024 am 04:25 AM

Optimizing Performance with Lazy Loading in React Router v6

Malas Memuatkan dengan React Router v6

Pemuatan malas ialah teknik dalam pembangunan web yang membolehkan anda memuatkan komponen hanya apabila ia diperlukan, dan bukannya memuatkan semuanya terlebih dahulu. Ini amat berguna dalam aplikasi besar yang memuatkan semua komponen sekaligus boleh melambatkan pemuatan halaman awal.

React Router v6 berfungsi dengan lancar dengan React.lazy terbina dalam dan Suspense untuk melaksanakan pemuatan malas laluan. Dengan menggunakan ciri ini, anda boleh meningkatkan prestasi apl anda dan pengalaman pengguna dengan memuatkan komponen hanya apabila pengguna menavigasi ke ciri tersebut.


Cara Lazy Loading Berfungsi dalam React Router v6

Dalam React, React.lazy digunakan untuk mengimport komponen secara dinamik, dan Suspense digunakan untuk membalut komponen yang dimuatkan dengan malas semasa ia diambil. React Router v6 memudahkan untuk menyepadukan konsep ini untuk memuatkan laluan dengan malas.

Langkah untuk Melaksanakan Lazy Loading dalam React Router v6:

  1. Gunakan React.lazy to Lazy Load Komponen

    • React.lazy membolehkan anda menentukan komponen yang dimuatkan hanya apabila laluan itu diakses.
  2. Gunakan Suspense untuk Membungkus Komponen Lazy Loaded

    • Suspens digunakan untuk menentukan UI sandaran (seperti pemutar pemuatan) semasa komponen sedang dimuatkan.

Contoh: Lazy Loading dengan React Router v6

Langkah 1: Pasang Ketergantungan yang Diperlukan

Pastikan anda telah memasang React Router v6:

npm install react-router-dom@6

Langkah 2: Tentukan Komponen Lazy Loaded Anda

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

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

// Fallback UI component to show while lazy-loaded component is loading
const FallbackLoader = () => <div>Loading...</div>;

const App = () => {
  return (
    <Router>
      <Suspense fallback={<FallbackLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

Penjelasan:

  1. React.lazy(() => import('./Home')):

    • React.lazy mengimport komponen secara dinamik hanya apabila ia diperlukan, mengurangkan saiz berkas awal aplikasi anda.
    • Ini dilakukan untuk komponen Rumah, Perihal dan Kenalan dalam contoh.
  2. Saspens:

    • Komponen Suspense dililit di seluruh sekat untuk menyediakan UI sandaran () apabila komponen yang dimuatkan malas sedang diambil.
    • Ini memastikan bahawa pemutar pemuatan atau mesej muncul semasa komponen sedang dimuatkan.
  3. Sandaran Prop dalam Suspen:

    • Prop sandaran menentukan UI yang harus dipaparkan semasa komponen yang dimuatkan malas sedang diambil (dalam kes ini, ia adalah mesej pemuatan yang mudah).

Malas Memuatkan dengan Laluan Bersarang

Pemuatan malas juga boleh digunakan pada laluan bersarang, meningkatkan masa muat untuk halaman dengan komponen bersarang.

npm install react-router-dom@6

Penjelasan:

  • Di sini, komponen Papan Pemuka, Gambaran Keseluruhan Papan Pemuka dan Tetapan Papan Pemuka dimuatkan secara malas apabila laluan yang sepadan diakses.
  • Komponen Suspense membungkus laluan untuk menunjukkan keadaan pemuatan sandaran semasa komponen bersarang ini sedang dimuatkan.

Amalan Terbaik untuk Pemuatan Malas dalam Penghala Reaksi v6

  1. Chunking dan Pemisahan Kod: Penghala Reaksi membolehkan anda membahagikan apl anda kepada beberapa bahagian, dengan setiap laluan menjadi satu berkas berasingan yang boleh dimuatkan atas permintaan. Ini mengurangkan masa pemuatan awal dan mempercepatkan apl.

  2. Gunakan Fallback dengan Bijak: Pastikan UI fallback memberikan pengalaman pengguna yang baik. Pemintal pemuatan ringkas atau teks biasanya sudah mencukupi, tetapi anda boleh menyesuaikannya lagi.

  3. Pramuat Laluan Kritikal: Untuk halaman kritikal yang pengguna mungkin akan menavigasi terlebih dahulu, pertimbangkan untuk pramuat laluan ini di latar belakang supaya ia bersedia apabila pengguna menavigasi ke laluan tersebut.

  4. Hadkan Pemuatan Malas: Gunakan pemuatan malas untuk komponen yang tidak kritikal. Jangan terlalu menggunakan pemuatan malas untuk komponen kecil yang tidak akan menjejaskan masa pemuatan awal dengan ketara.


Kesimpulan

Lazy loading dalam React Router v6, dikuasakan oleh React.lazy dan Suspense, membantu mengoptimumkan prestasi aplikasi React anda dengan memuatkan komponen hanya apabila ia diperlukan. Ia meningkatkan pengalaman pengguna dengan mengurangkan masa muat awal dan membolehkan anda mengurus aplikasi besar dengan cekap.

Dengan menggabungkan React.lazy untuk pemisahan kod dan Suspense untuk UI sandaran, React Router v6 memudahkan untuk melaksanakan pemuatan malas untuk laluan peringkat atas dan laluan bersarang.


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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Mejiro Ryan Build Guide | Uma Musume Pretty Derby
1 bulan yang lalu By Jack chen
Rimworld Odyssey Cara Ikan
4 minggu yang lalu By Jack chen
Apakah had transaksi untuk pengguna asing di Alipay?
1 bulan yang lalu By 下次还敢

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1504
276
Bagaimana membuat permintaan HTTP di node.js? Bagaimana membuat permintaan HTTP di node.js? Jul 13, 2025 am 02:18 AM

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis Data JavaScript: Rujukan primitif vs Jenis Data JavaScript: Rujukan primitif vs Jul 13, 2025 am 02:43 AM

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Menapis pelbagai objek dalam JavaScript Menapis pelbagai objek dalam JavaScript Jul 12, 2025 am 03:14 AM

Kaedah penapis () dalam JavaScript digunakan untuk membuat array baru yang mengandungi semua elemen ujian lulus. 1.filter () tidak mengubah suai array asal, tetapi mengembalikan array baru yang memenuhi unsur -unsur bersyarat; 2. Sintaks asas adalah array.filter ((elemen) => {returnCondition;}); 3. Arahan objek boleh ditapis dengan nilai atribut, seperti penapisan pengguna yang lebih tua dari 30; 4. Menyokong penapisan pelbagai syarat, seperti memenuhi syarat umur dan nama panjang pada masa yang sama; 5. Boleh mengendalikan keadaan dinamik dan lulus parameter penapis ke dalam fungsi untuk mencapai penapisan fleksibel; 6. Apabila menggunakannya, berhati -hati untuk mengembalikan nilai Boolean untuk mengelakkan kembali tatasusunan kosong, dan menggabungkan kaedah lain untuk mencapai logik kompleks seperti padanan rentetan.

Cara Memeriksa Sekiranya Arahan Termasuk Nilai Dalam JavaScript Cara Memeriksa Sekiranya Arahan Termasuk Nilai Dalam JavaScript Jul 13, 2025 am 02:16 AM

Dalam JavaScript, periksa sama ada array mengandungi nilai tertentu. Kaedah yang paling biasa termasuk (), yang mengembalikan nilai boolean dan sintaks adalah array. termasuk (valueTofind), contohnya buah -buahan. termasuk ('pisang') kembali benar; Sekiranya perlu bersesuaian dengan persekitaran lama, gunakan indexof (), seperti nombor.indexof (20)! ==-1 pulangan benar; Untuk objek atau data yang kompleks, beberapa () kaedah harus digunakan untuk perbandingan mendalam, seperti users.some (user => user.id === 1) pulangan benar.

Pengendalian Ralat dalam Fungsi JavaScript Async/Menunggu Pengendalian Ralat dalam Fungsi JavaScript Async/Menunggu Jul 12, 2025 am 03:17 AM

Untuk mengendalikan kesilapan dalam fungsi asynchronous, gunakan cuba/menangkap, mengendalikannya dalam rantaian panggilan, gunakan kaedah .catch (), dan dengar peristiwa yang tidak dimanfaatkan. 1. Gunakan cuba/menangkap untuk menangkap kesilapan adalah kaedah yang disyorkan, dengan struktur yang jelas dan boleh mengendalikan pengecualian dalam menanti; 2. Kesilapan mengendalikan dalam rantaian panggilan boleh menjadi logik berpusat, yang sesuai untuk proses pelbagai langkah; 3. Gunakan .catch () untuk menangkap kesilapan selepas memanggil fungsi async, yang sesuai untuk senario kombinasi janji; 4. Dengarkan peristiwa yang tidak diingini untuk merakam penolakan yang tidak dialami sebagai barisan pertahanan terakhir; Kaedah di atas bersama -sama memastikan bahawa kesilapan asynchronous ditangkap dengan betul dan diproses.

Bagaimana Mengatasi Zon Masa di JavaScript? Bagaimana Mengatasi Zon Masa di JavaScript? Jul 11, 2025 am 02:41 AM

Kunci untuk menangani isu zon waktu JavaScript adalah memilih kaedah yang betul. 1. Apabila menggunakan objek tarikh asli, disarankan untuk menyimpan dan memindahkan masa UTC dan menukarnya ke zon waktu tempatan pengguna ketika memaparkan; 2. Untuk operasi zon waktu yang kompleks, momen-TIMEZONE boleh digunakan, yang menyokong pangkalan data zon waktu IANA dan menyediakan fungsi pemformatan dan penukaran yang mudah; 3. Jika anda perlu melokalkan masa paparan dan tidak mahu memperkenalkan perpustakaan pihak ketiga, anda boleh menggunakan intl.dateTimeFormat; 4. Adalah disyorkan untuk penyelesaian ringan hari ini.js dan zon waktu dan pemalam UTC, yang mempunyai API ringkas, prestasi yang baik dan menyokong penukaran zon waktu.

Konsep dom maya yang dijelaskan dalam konteks JavaScript Konsep dom maya yang dijelaskan dalam konteks JavaScript Jul 12, 2025 am 03:09 AM

Maya DOM adalah konsep pengaturcaraan yang mengoptimumkan kemas kini DOM sebenar. Dengan mewujudkan struktur pokok yang sepadan dengan DOM sebenar dalam ingatan, ia mengelakkan operasi DOM yang kerap dan langsung. Prinsip terasnya ialah: 1. Menjana DOM maya baru apabila data berubah; 2. Cari perbezaan terkecil antara dom maya baru dan lama; 3. Kemas kini batch DOM sebenar untuk mengurangkan overhead penyusunan semula dan redrawing. Di samping itu, dengan menggunakan kunci stabil yang unik dapat meningkatkan kecekapan perbandingan senarai, sementara beberapa rangka kerja moden telah mengadopsi teknologi lain untuk menggantikan DOM maya.

Apakah pengaturcaraan berfungsi? JS Roundup konsep teras Apakah pengaturcaraan berfungsi? JS Roundup konsep teras Jul 11, 2025 am 03:13 AM

Fungsionalprogramminginjavascriptemphasizesclean, predicableCodeThroughcoreconcepts.1.purefunctionsconsistentlyreturnthesameOutputWithoutSideFefects, IntervingTestabilityandPredictability.2.immutabilityavoidsdatamodificycreatingnewdatacies

See all articles