Οδηγός για Lazy Loading With React

Εισαγωγή

Κατά την ανάπτυξη μεγάλων εφαρμογών React, συνήθως χρησιμοποιούμε πολλές εικόνες και βίντεο, εγκαθιστούμε πακέτα/βιβλιοθήκες τρίτων, πραγματοποιούμε κλήσεις API και κάνουμε διάφορα άλλα πράγματα. Αυτό φυσικά αυξάνει τον χρόνο που χρειάζεται για τη φόρτωση της εφαρμογής μας και οδηγεί σε ένα τεράστιο μέγεθος πακέτου, το οποίο συμβάλλει σε μια κακή εμπειρία χρήστη. Εκεί είναι που τεμπέλης φόρτωσης μπαίνει στη θέση του. Μας δίνει τη δυνατότητα να φορτώσουμε το περιεχόμενο πάνω στην ώρα, ακριβώς πριν εμφανιστεί στην εφαρμογή.

Μπορούμε να αποφύγουμε την προφόρτωση περιεχομένου ενώ είναι ακόμα εκτός προβολής και να εστιάσουμε όλους τους πόρους στο περιεχόμενο που βρίσκεται στην προβολή.

Σε αυτόν τον οδηγό, θα δούμε πώς να το χρησιμοποιήσετε React.lazy() και React.Suspense να εφαρμόσουμε τη λειτουργία αργής φόρτωσης και διαχωρισμού κώδικα που μας επιτρέπει να χειριζόμαστε τον διαχωρισμό κώδικα χωρίς την ανάγκη εγκατάστασης πρόσθετων βιβλιοθηκών.

Τι είναι το Lazy Loading;

Όταν εκκινούμε μια εφαρμογή Ιστού React, συνήθως ομαδοποιεί ολόκληρη την εφαρμογή ταυτόχρονα, φορτώνοντας τα πάντα, συμπεριλαμβανομένων ολόκληρων σελίδων, εικόνων, περιεχομένου και πολλά άλλα για εμάς, με πιθανό αποτέλεσμα αργό χρόνο φόρτωσης και συνολική κακή απόδοση, ανάλογα με το μέγεθος του περιεχομένου και το εύρος ζώνης του Διαδικτύου εκείνη τη στιγμή.

Lazy φόρτωση μας επιτρέπει να φορτώνουμε συγκεκριμένα εξαρτήματα μόνο όταν χρειάζονται. Τυπικά, παίζουμε επίσης διαχωρισμός κώδικα σε λογικά στοιχεία που μπορεί να φορτωθούν τεμπέλης με το περιεχόμενο επίσης.

Για παράδειγμα, εάν έχουμε μια σελίδα πίνακα εργαλείων που εμφανίζει πολλές πληροφορίες από διάφορες πηγές όταν γίνεται κλικ, είναι πάντα καλύτερο να διατηρείτε αυτά τα στοιχεία και τις σελίδες με αργή φόρτωση, ώστε να φορτώνονται μόνο όταν χρειάζεται ή απαιτείται από τον χρήστη.

Σημείωση: Η διαδικασία της διοχέτευσης μιας μεγάλης δέσμης κώδικα σε πολλαπλά πακέτα που μπορούν να φορτωθούν δυναμικά με γενικό στόχο την αποφυγή προβλημάτων απόδοσης που σχετίζονται με μεγάλα πακέτα είναι γνωστή ως διαχωρισμός κώδικα. Αυτό επιτυγχάνεται χωρίς μείωση της ποσότητας του κώδικα στην εφαρμογή μας.

Συνοπτικά, η τεμπέλης φόρτωση μας επιτρέπει να αποδίδουμε στοιχεία ή στοιχεία κατά παραγγελία, κάνοντας την εφαρμογή μας πιο αποτελεσματική και παρέχοντας καλύτερη εμπειρία χρήστη.

Σημείωση: Εφαρμογές μιας σελίδας (SPA) έχουν σχεδιαστεί για να περιέχουν όλες τις σελίδες και το περιεχόμενο σε ένα μόνο έγγραφο/σελίδα. Γι' αυτό το lazy loading είναι ιδιαίτερα χρήσιμο κατά την ανάπτυξη SPA.

Πώς να εφαρμόσετε το Lazy Loading στο React

Μέχρι στιγμής, έχουμε δει τι είναι το lazy loading και γιατί είναι σημαντικό να το εφαρμόσουμε. Τώρα, ας δούμε πώς μπορούμε να το εφαρμόσουμε στις εφαρμογές μας React, χρησιμοποιώντας δύο δυνατότητες του React που κάνουν εύκολη την εφαρμογή του διαχωρισμού κώδικα και της τεμπέλης φόρτωσης – React.lazy() και React.Suspense.

React.lazy() είναι μια συνάρτηση που μας επιτρέπει να αποδώσουμε δυναμικές εισαγωγές με τον ίδιο τρόπο όπως τα κανονικά εξαρτήματα. Χρησιμοποιώντας δυναμικές εισαγωγές παράλληλα με το React.lazy() θα μας επιτρέψει να εισαγάγουμε ένα στοιχείο λίγο πριν αποδοθεί σε μια οθόνη. Ένα σημαντικό πράγμα που πρέπει να σημειωθεί είναι ότι React.lazy() δέχεται μια συνάρτηση ως όρισμα - αυτή η συνάρτηση πρέπει να καλεί τη δυναμική import() στο σώμα του.

React.Suspense μας δίνει τη δυνατότητα να καθορίσουμε την εναλλακτική στήριγμα που λαμβάνει ένα περιεχόμενο κράτησης θέσης που θα χρησιμοποιηθεί ως α ένδειξη φόρτωσης ενώ όλα τα τεμπέλικα εξαρτήματα φορτώνονται.

Ας ξεκινήσουμε εξετάζοντας πώς μπορούμε να εφαρμόσουμε lazy loading στα εισαγόμενα στοιχεία μας και, στη συνέχεια, πώς μπορούμε να την εφαρμόσουμε στις διαδρομές μας, ώστε οι σελίδες να μην φορτώνονται μέχρι να πλοηγηθούμε σε αυτές.

Ξεκινώντας

Ας υποθέσουμε ότι έχουμε την εφαρμογή React και την εισάγαμε About συστατικό στο Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Μπορούμε τώρα να εφαρμόσουμε lazy loading κάνοντας χρήση του React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Σημείωση: React.lazy() χρησιμοποιείται με αυτόν τον τρόπο επιστρέφει α Promise αντικείμενο. Αυτή η υπόσχεση επιλύεται σε μια λειτουργική μονάδα που περιέχει ένα στοιχείο React που θέλουμε να φορτώσουμε αργά σε αυτήν default εξαγωγή.

Έχουμε εφαρμόσει lazy loading χρησιμοποιώντας React.lazy(), αλλά ο παραπάνω κωδικός θα ρίχνει πάντα ένα σφάλμα λέγοντας ότι μας “React component suspended while rendering, but no fallback UI was specified”. Αυτό μπορεί να διορθωθεί τυλίγοντας το εξάρτημα με React.Suspense'μικρό fallbackz και συνδέοντας τα εφεδρικά στηρίγματα όπως εξηγήσαμε προηγουμένως:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Σημείωση: Το εφεδρικό στηρίγμα μπορεί να εμφανίσει ένα στοιχείο πριν φορτωθεί το αρχικό περιεχόμενο.

Επιπλέον, μπορούμε να αποφασίσουμε καταστροφή την εισαγωγή React για να γίνει ο κώδικας πιο καθαρός και πιο ευανάγνωστος:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Μέχρι στιγμής, έχουμε δει πώς να εφαρμόσουμε τεμπέλικο φόρτωμα στα εισαγόμενα εξαρτήματά μας. Τώρα, ας δούμε πώς να το εφαρμόσουμε στις διαδρομές μας κατά τη δρομολόγηση με το δρομολογητή React.

Πώς να εφαρμόσετε Lazy Loading με το React Router

Η Lazy Routing είναι στην πραγματικότητα μια καλή πρακτική για διαδρομές που έχουν πολύ περιεχόμενο και μπορεί να επιβραδύνουν το χρόνο φόρτωσης της εφαρμογής σας. Η εφαρμογή lazy loading για διαδρομές React είναι σχεδόν πανομοιότυπη με ό,τι κάναμε νωρίτερα όταν φορτώναμε δυναμικά εισαγόμενα εξαρτήματα με καθυστέρηση.

Lazy loading Οι διαδρομές React αναφέρονται στη δυναμική εισαγωγή ενός στοιχείου μόνο όταν αυτό είναι απαραίτητο. Για παράδειγμα, ας πούμε ότι έχουμε δύο διαδρομές στην εφαρμογή μας και δύο στοιχεία που αντιπροσωπεύουν αυτές τις διαδρομές. Εάν εφαρμόσουμε την αναφερόμενη δρομολόγηση με τον ακόλουθο τρόπο, κάθε στοιχείο θα φορτωθεί μόνο όταν πλοηγηθούμε στην αντίστοιχη διαδρομή:

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

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

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

Συμπέρασμα

Σε αυτόν τον οδηγό, μάθαμε τι είναι η lazy φόρτωση και ο διαχωρισμός κώδικα, πώς να τα εφαρμόσετε και ότι το καλύτερο μέρος για να εφαρμόσετε το lazy loading είναι οι διαδρομές. Αυτό αποφεύγει την απόδοση ολόκληρης της σελίδας ταυτόχρονα, κάτι που μπορεί να έχει ως αποτέλεσμα πιο αργό χρόνο φόρτωσης όταν αντιμετωπίζετε σελίδες με μεγάλο όγκο περιεχομένου.