Πώς να χρησιμοποιήσετε το React.lazy και το Suspense για τεμπέλης φόρτωσης στοιχείων

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

Τι είναι ο διαχωρισμός κώδικα και η τεμπέλης φόρτωση;

Το Webpack ορίζει τον διαχωρισμό κώδικα ως:

"Τεχνική διαχωρισμού του κώδικα σε διάφορα πακέτα τα οποία μπορούν στη συνέχεια να φορτωθούν κατ 'απαίτηση ή παράλληλα". [Πηγή]

Ένας άλλος τρόπος για να πούμε: «φόρτωση κατ 'απαίτηση ή παράλληλα» είναι ο τεμπέλης φόρτωση .

Απέναντι από το τεμπέλης φόρτωσης είναι η πρόθυμη φόρτωση . Εδώ όλα φορτώνονται ανεξάρτητα από το αν το χρησιμοποιείτε ή όχι.

Γιατί θα χρησιμοποιούσαμε διαχωρισμό κώδικα και τεμπέλης φόρτωση;

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

Η λήψη μερικών MB είναι ένα κομμάτι κέικ για τη σημερινή ταχύτητα στο Διαδίκτυο. Πρέπει ακόμη να σκεφτούμε τους χρήστες με αργή σύνδεση στο Διαδίκτυο ή χρησιμοποιώντας δεδομένα κινητής τηλεφωνίας.

Πώς έγινε πριν από το React 16.6;

Ίσως η πιο δημοφιλής βιβλιοθήκη για τεμπέλη φόρτωση των στοιχείων React είναι react-loadable.

Είναι σημαντικό ότι το reactjs.org εξακολουθεί να προτείνει react-loadableεάν η εφαρμογή σας αποδίδεται στο διακομιστή. [Πηγή]

react-loadableείναι στην πραγματικότητα αρκετά παρόμοια με τη νέα προσέγγιση του React. Θα το δείξω στο παρακάτω demo.

Χρειάζεται κάτι για τη ρύθμιση;

Ας δούμε τι έχει να πει για το reactjs.org:

"Εάν χρησιμοποιείτε το Δημιουργία εφαρμογής React, Next.js, Gatsby ή ένα παρόμοιο εργαλείο, θα έχετε μια ρύθμιση Webpack από το κουτί για να ομαδοποιήσετε την εφαρμογή σας. Εάν δεν το κάνετε, θα πρέπει να ρυθμίσετε τη δέσμευση μόνοι σας . Για παράδειγμα, ανατρέξτε στους οδηγούς εγκατάστασης και έναρξης στα έγγραφα του Webpack. "

- reactjs.org

Εντάξει, επομένως απαιτείται Webpack , το οποίο χειρίζεται δυναμικές εισαγωγές των πακέτων

Η ακόλουθη επίδειξη δημιουργείται χρησιμοποιώντας Create React App.και σε αυτήν την περίπτωση, το Webpack έχει ήδη ρυθμιστεί και είμαστε έτοιμοι να ξεκινήσουμε

ΔΙΑΔΗΛΩΣΗ

Για αυτό το demo, θα το χρησιμοποιήσουμε react-pdf. react-pdfείναι μια φοβερή βιβλιοθήκη που χρησιμοποιείται για τη δημιουργία αρχείων PDF στο πρόγραμμα περιήγησης, στο κινητό και στο διακομιστή. Θα μπορούσαμε να δημιουργήσουμε ένα PDF στο διακομιστή, αλλά αν προτιμούμε να το κάνουμε από την πλευρά του πελάτη, συνοδεύεται από κόστος: μέγεθος δέσμης.

Χρησιμοποιώ την επέκταση κόστους εισαγωγής για τον κώδικα Visual Studio για να δω τα μεγέθη των βιβλιοθηκών που χρησιμοποιούνται.

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

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

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

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

Eager VS τεμπέλης φόρτωση βιτρίνα

Και για τις δύο περιπτώσεις, θα χρησιμοποιήσουμε ένα στοιχείο που εισάγει εξαρτήσεις από react-pdfκαι καθιστά ένα απλό έγγραφο PDF.

Τίποτα εντυπωσιακό δεν συμβαίνει εδώ. Εισάγουμε PDFViewer, Document, Page, Text, Viewαπό react-pdf. Όλα αυτά χρησιμοποιούνται στη renderμέθοδο του PDFPreviewσυστατικού.

PDFPreviewλαμβάνει μόνο μία propκλήση title. Όπως υποδηλώνει το όνομα, χρησιμοποιείται ως τίτλος σε ένα αρχείο PDF που δημιουργήθηκε πρόσφατα.

Το pdfStyles.js μοιάζει με αυτό:

Πρόθυμος φόρτωση

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

η οποία αποδίδει την ακόλουθη προβολή στο πρόγραμμα περιήγησης:

Ας δούμε τον κώδικα μαζί:

Στη γραμμή 2 εισάγουμε PDFPreviewστοιχείο.

Στη γραμμή 6 αρχικοποιούμε την κατάσταση με προεπιλεγμένες τιμές. nameείναι ένα πεδίο που χρησιμοποιείται ως τίτλος στο αρχείο PDF, ενώ το πεδίο PDFPreviewείναι ένα boolean που δείχνει ή κρύβεται PDFPreview.

Τώρα, ας πάμε στη renderμέθοδο και ελέγξτε τι θα αποδίδεται.

Στις γραμμές 19 και 25 δίνουμε μια είσοδο και ένα κουμπί. Όταν ο χρήστης πληκτρολογεί την είσοδο, nameη κατάσταση αλλάζει.

Στη συνέχεια, όταν ένας χρήστης κάνει κλικ στο "Δημιουργία PDF", showPDFPreviewορίζεται σε true. Η συνιστώσα επανεμφανίζεται και εμφανίζει το PDFPreviewστοιχείο.

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

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

Τεμπέλη φόρτωση

Έχουμε κάνει μόνο μικρές αλλαγές και ας τις εξετάσουμε.

Η γραμμή 2 αντικαθίσταται με:

const LazyPDFDocument = React.lazy(() => import("./PDFPreview"))

Ας δούμε τι λένε τα έγγραφα React για το React.lazy:

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

- reactjs.org

Στη γραμμή 27 χρησιμοποιούμε Suspense, το οποίο πρέπει να είναι γονέας ενός τεμπέλης. Όταν showPDFPreviewέχει οριστεί σε true, LazyPDFDocumentαρχίζει να φορτώνεται.

Μέχρι να επιλυθεί το στοιχείο του παιδιού, Suspenseεμφανίζει ό , τι παρέχεται για να fallbackστηρίξει.

Το τελικό αποτέλεσμα μοιάζει με αυτό:

Μπορούμε να δούμε 0.chunk.js βάρη σημαντικά λιγότερο από ό, τι πριν και 4.chunk.js και 3.chunk.js φορτώνονται με το πάτημα του κουμπιού.

συμπέρασμα

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

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

Εάν η απάντηση είναι ναι, τότε React.Lazyκαι Suspenseπραγματικά βοηθήστε μας με αυτό το έργο.

Ευχαριστούμε που το διαβάσατε! Μοιραστείτε το με οποιονδήποτε μπορεί να το θεωρήσει χρήσιμο και αφήστε σχόλια.