Το κύριο πρόβλημα που σχετίζεται με την τεμπέλικη φόρτωση του δρομολογητή React είναι ότι μπορεί να προκαλέσει προβλήματα απόδοσης εάν δεν εφαρμοστεί σωστά. Η αργή φόρτωση μπορεί να αυξήσει τον αρχικό χρόνο φόρτωσης της σελίδας, καθώς ο κώδικας για κάθε στοιχείο πρέπει να φορτωθεί ξεχωριστά. Επιπλέον, εάν ένα εξάρτημα δεν χρησιμοποιείται συχνά, ενδέχεται να μην φορτωθεί ποτέ, με αποτέλεσμα τη σπατάλη πόρων. Τέλος, υπάρχουν πιθανά προβλήματα συμβατότητας με παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν τεμπέλικο φόρτωμα.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } 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...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router> ); } export default App;
1. Εισαγάγετε το React, { Suspense } από το 'react';
// Αυτή η γραμμή εισάγει τη βιβλιοθήκη React και το στοιχείο Suspense από τη βιβλιοθήκη React.
2. εισαγωγή { BrowserRouter as Router, Route, Switch } από το 'react-router-dom';
// Αυτή η γραμμή εισάγει τα στοιχεία BrowserRouter, Route και Switch από τη βιβλιοθήκη react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Αυτή η γραμμή δημιουργεί μια σταθερά που ονομάζεται Home που χρησιμοποιεί τη δυνατότητα lazy loading του React για να εισάγει δυναμικά ένα στοιχείο που ονομάζεται Home από ένα αρχείο στον ίδιο κατάλογο με αυτό το αρχείο (το στοιχείο App).
4. const About = React.lazy(() => import('./About'));
// Αυτή η γραμμή δημιουργεί μια σταθερά με την ονομασία About (Πληροφορίες) που χρησιμοποιεί την τεμπέλικη φόρτωση για να εισάγει δυναμικά ένα στοιχείο που ονομάζεται About από ένα αρχείο στον ίδιο κατάλογο με αυτό το αρχείο (το στοιχείο App).
const Επαφή = React.lazy(() => import('./Contact')); // Αυτή η γραμμή δημιουργεί μια σταθερά που ονομάζεται Επαφή που χρησιμοποιεί τεμπέλης φόρτωση για να εισάγει δυναμικά ένα στοιχείο που ονομάζεται Επαφή από ένα αρχείο στον ίδιο κατάλογο με αυτό το αρχείο (το στοιχείο εφαρμογής).
5. συνάρτηση App() { return ( // Αυτή είναι μια συνάρτηση βέλους που επιστρέφει κώδικα JSX τυλιγμένο σε ετικέτα Router που έχει εισαχθεί νωρίτερα
6.Φόρτωση…
}> //Αυτή η ετικέτα Suspense τυλίγει όλες τις διαδρομές μας με εναλλακτικά στηρίγματα του Loading… εάν κάποια διαδρομή χρειάζεται χρόνο για να φορτώσει
7. //Η ετικέτα Switch θα διασφαλίσει ότι μόνο μία διαδρομή αποδίδεται ταυτόχρονα
8. //Αυτή η Διαδρομή θα αποδώσει το στοιχείο Home όταν αντιστοιχιστεί η ακριβής διαδρομή "/".
9. //Αυτή η διαδρομή θα αποδώσει About Component όταν η διαδρομή "/about" αντιστοιχιστεί
10. //Αυτή η διαδρομή θα αποδώσει το στοιχείο επαφής όταν αντιστοιχιστεί η διαδρομή "/contact" ) } εξαγωγή προεπιλεγμένης εφαρμογής. //Τέλος κλείνουμε όλες τις ετικέτες και εξάγουμε την εφαρμογή μας
Πρόβλημα τεμπέλης φόρτωσης
Το Lazy loading είναι μια τεχνική που χρησιμοποιείται για την καθυστέρηση της φόρτωσης ορισμένων εξαρτημάτων μέχρι να χρειαστούν. Αυτό μπορεί να βοηθήσει στη βελτίωση της απόδοσης μιας εφαρμογής φορτώνοντας μόνο ό,τι είναι απαραίτητο ανά πάσα στιγμή. Ωστόσο, αυτό μπορεί να είναι πρόβλημα κατά τη χρήση του δρομολογητή React, καθώς δεν υποστηρίζει την τεμπέλικη φόρτωση από το κουτί. Για να επιλύσετε αυτό το ζήτημα, οι προγραμματιστές πρέπει να ρυθμίσουν τις παραμέτρους των διαδρομών τους με μη αυτόματο τρόπο, ώστε να ενεργοποιήσουν την τεμπέλικη φόρτωση. Αυτό μπορεί να περιλαμβάνει τη ρύθμιση δυναμικών εισαγωγών και διαχωρισμό κώδικα, που μπορεί να είναι πολύπλοκες και χρονοβόρες εργασίες. Επιπλέον, ορισμένες βιβλιοθήκες, όπως η React Loadable, ενδέχεται να χρειαστεί να χρησιμοποιηθούν προκειμένου να εφαρμοστεί σωστά η τεμπέλης φόρτωση με το React Router.
Τι είναι το React lazy load
Το React lazy load είναι ένα χαρακτηριστικό του React Router που επιτρέπει τη φόρτωση εξαρτημάτων κατά παραγγελία. Αυτό σημαίνει ότι αντί να φορτώνονται όλα τα στοιχεία ταυτόχρονα, μόνο τα απαραίτητα στοιχεία φορτώνονται όταν χρειάζεται. Αυτό βοηθά στη μείωση του αρχικού χρόνου φόρτωσης της σελίδας και στη βελτίωση της απόδοσης. Επιτρέπει επίσης καλύτερη οργάνωση κώδικα και διαχωρισμό των ανησυχιών, καθώς κάθε στοιχείο μπορεί να φορτωθεί ανεξάρτητα.
Πώς μπορώ να χρησιμοποιήσω το React lazy στο δρομολογητή μου
Το React lazy είναι μια δυνατότητα του React που σας επιτρέπει να εισάγετε δυναμικά στοιχεία. Αυτό σημαίνει ότι αντί να φορτώνετε όλα τα εξαρτήματα εκ των προτέρων, μπορείτε να τα φορτώσετε όπως απαιτείται. Αυτό μπορεί να είναι χρήσιμο για τη βελτιστοποίηση της απόδοσης σε μεγάλες εφαρμογές.
Για να χρησιμοποιήσετε το React lazy στον δρομολογητή σας στο React Router, πρέπει να τυλίξετε το στοιχείο που θέλετε να φορτώσετε lazy σε μια δυναμική κλήση εισαγωγής. Για παράδειγμα:
const MyComponent = React.lazy(() => import('./MyComponent'));
Στη συνέχεια, όταν ορίζετε τις διαδρομές σας, απλώς περάστε το στοιχείο MyComponent στο στοιχείο Διαδρομή ως εξής:
Αυτό θα κάνει το React Router να φορτώσει δυναμικά το στοιχείο MyComponent κατά την πλοήγηση σε αυτήν τη διαδρομή.
