Εφαρμογή Lazy Φόρτωση σε Αντιδραστική Native για κέρδη απόδοσης

Τι Είναι Τεμπέλικο Φόρτωση;

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

• Faster αρχική απόδοση ⁇ Η εφαρμογή ξεκινά με μόνο ουσιώδη συστατικά, έτσι ώστε ο χρήστης βλέπει το περιεχόμενο νωρίτερα.
• Χαμηλή χρήση μνήμης ⁇ Τα μη χρησιμοποιημένα συστατικά δεν διατηρούνται στη μνήμη.
• Επείγοντα ανταπόκριση ⁇ Το κύριο νήμα δεν εμποδίζεται από τις βαριές εισαγωγές κατά την εκκίνηση.

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

Οφέλη από τεμπέλη Φόρτωση σε Αντιδρούν γηγενή

Η υιοθέτηση τεμπέληδων φορτώσεων αποφέρει ένα ευρύ φάσμα βελτιώσεων απόδοσης:

1. Μειωμένο αρχικό μέγεθος πακέτου ⁇ Ο χωρισμός κώδικα επιτρέπει τη διάσπαση του πακέτου JavaScript σε μικρότερα κομμάτια φορτωμένα κατά παραγγελία. Αυτό είναι κρίσιμο επειδή React Native apps ship a single JavaScript band that must be parsed and explored at λανσάρισμα.
2. Γρήγορος χρόνος για διαδραστικό (TTI) ⁇ Η εφαρμογή γίνεται χρήσιμη νωρίτερα επειδή αναβάλλονται βαρείς υπολογισμοί και μεγάλες εισαγωγές βιβλιοθήκης.
3. Καλύτερη διάρκεια ζωής μπαταρίας ⁇ Οι πόροι αδράνειας δεν φορτώνονται, μειώνοντας τη χρήση της ΚΜΕ και συντηρώντας την μπαταρία.
4. Εύκολη συντήρηση ⁇ Η τεμπέλικη φόρτωση ενθαρρύνει τον αρθρωτό κώδικα, καθιστώντας τη βάση κώδικα ευκολότερη στην πλοήγηση και τη δοκιμή.

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

Εφαρμογή Lazy Loading με React.lazy και Suspense

Αντιδρούν Native υποστηρίζει και από την έκδοση 0.62. Ωστόσο, υπάρχουν αποχρώσεις σε σύγκριση με React για το διαδίκτυο. Ας περπατήσουμε μέσα από μια συγκεκριμένη εφαρμογή.

Βασική ρύθμιση

Πρώτον, βεβαιωθείτε ότι χρησιμοποιείτε μια συμβατή React Native έκδοση (>=0.62) και ότι ο φορτωτής σας (Metro) έχει ρυθμιστεί για να υποστηρίζει δυναμικές εισαγωγές.

Βήμα 1 ⁇ Τεμπέλης Φόρτωση ενός συστατικού

Δημιουργία ενός βαρέος συστατικού, για παράδειγμα, ενός σύνθετου χάρτη ή ενός μεγάλου καταλόγου, και εισαγωγή του με χρήση [[LFT:4]:

Βήμα 2 ⁇ Τύλιγμα με αγωνία

Παρέχετε ένα εφεδρικό UI ενώ το εξάρτημα φορτώνεται:

Σημαντικό Σπήλαιο για την Αντιμετώπιση των Ιθαγενών

Στο διαδίκτυο, λειτουργεί χωρίς ραφή με React.lazy. Σε React Native, ] είναι διαθέσιμο, αλλά δεν λειτουργούν όλοι οι τύποι συστατικών τέλεια μέσα σε αυτό ⁇ ιδιαίτερα τα στοιχεία κλάσης κληρονομιάς που βασίζονται σε για παρενέργειες. Πάντα να δοκιμάζετε τεμπέληδες-φορτωμένα συστατικά σας σε πραγματικές συσκευές. Για τα περισσότερα λειτουργικά συστατικά χρησιμοποιώντας άγκιστρα, λειτουργεί μια χαρά.

Προηγμένη τεμπέληδες τεχνικές φόρτωσης

Τεμπέλης με οθόνη Φόρτωση με React Πλοήγηση

Η πιο συνηθισμένη περίπτωση χρήσης για τεμπέληδες φόρτωσης σε εφαρμογές κινητής τηλεφωνίας είναι η αναβαλλόμενη φόρτωση οθόνης. Αντιδρά η πλοήγηση, η de facto βιβλιοθήκη πλοήγησης, υποστηρίζει αυτό το μοτίβο έξω από το κουτί μέσω της προπέλας και δυναμικής .

Παράδειγμα με την Αντιδραστική Πλοήγηση 6:

Μπορείτε να βελτιστοποιήσετε περαιτέρω χρησιμοποιώντας προεπισκόπηση[: όταν ένας χρήστης αιωρείται πάνω από μια καρτέλα ή πλοηγείται σε μια οθόνη, μπορείτε να αρχίσετε να φορτώνετε την επόμενη οθόνη εκ των προτέρων χρησιμοποιώντας ] ή χειροκίνητα κλήσεις.

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

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

Παράδειγμα με το FlatList για να τεμπέλη φορτώσει μόνο ορατές σειρές:

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

Κωδικός Splitting με React.lazy και React οθόνες πλοήγησης

Για μεγάλες εφαρμογές, μπορείτε επίσης να διαχωρίσετε το πακέτο JavaScript ανά οθόνη χρησιμοποιώντας React.lazy σε συνδυασμό με React Navigation’s [[LPT:20]] λειτουργία από React Navigation v5. Ωστόσο, σημειώστε ότι η React Navigation v6 χρησιμοποιεί το εξάρτημα άμεσα, ώστε να μπορείτε να το τυλίξετε με τεμπέλη όπως φαίνεται παραπάνω.

Βέλτιστες πρακτικές για τεμπέληδες Φόρτωση σε Αντιδρούν Native

• Ταυτότητα τι να φορτώσει τεμπέλης ⁇ Προφίλ εφαρμογή σας για να βρείτε τα βαρύτερα εξαρτήματα. Τυπικά αυτά είναι χάρτες, χάρτες, video players, πολύπλοκες μορφές, και οθόνες που ο χρήστης σπάνια επισκέπτεται.
• Παρέχουν σημαντικές υποχωρήσεις ⁇ Χρησιμοποιήστε οθόνες σκελετών, εφέ λάμψης, ή δείκτες δραστηριότητας, ώστε ο χρήστης να γνωρίζει κάτι συμβαίνει.
• Συνδυάστε με το caching ⁇ Μόλις φορτωθεί ένα εξάρτημα, εξετάστε το να το κρατήσετε στη μνήμη χρησιμοποιώντας την διαχείριση κατάστασης (π.χ. Redux, Recoil) ή για να αποφύγετε την επανατοποθέτηση.
• Αποφύγετε την τεμπέληδες φόρτωση ασήμαντων συστατικών ⁇ Τα γενικά έξοδα της δυναμικής εισαγωγής και της αγωνίας μπορούν να υπερτερούν των οφελών για πολύ μικρά συστατικά (π.χ. ένα ενιαίο ).
• Δοκιμές σε συσκευές χαμηλού επιπέδου ⁇ Τα κέρδη απόδοσης είναι πιο αισθητή σε συσκευές με περιορισμένη RAM και πιο αργές ΚΜΕ.
• Χρησιμοποιήστε το μετρό απαιτεί [[LFT:1]] ⁇ Για παλαιότερα έργα που δεν μπορούν να χρησιμοποιήσουν δυναμικές εισαγωγές, το μετρό υποστηρίζει [[LFT:23]] με [[LFT:24]]] στο μετρό να αναβάλει τη φόρτωση της μονάδας.

Πριν από την ανάπτυξη τεμπέληδες φόρτωσης, καθιερώστε μετρήσεις βάσης χρησιμοποιώντας εργαλεία όπως [ React Native Performance Monitor (διατίθεται μέσω του μενού προγραμματιστών), Flipper], ή [[LFT:4] React DevTools]. Track:

• Χρόνος για την αρχική απόδοση (TTIR)
• Χρόνος για διαδραστικό (TTI)
• Χρήση μνήμης πριν και μετά από τεμπέλη φόρτωση
• Μέγεθος δεσμού ανά τεμάχιο

Μετά την εφαρμογή, επαναμετρήστε για να ποσοτικοποιήσετε τις βελτιώσεις. Σε πολλές εφαρμογές Native React σε πραγματικό κόσμο (π.χ., ]Shopify’s app[]), η τεμπέλικη φόρτωση μείωσε το χρόνο εκκίνησης κατά πάνω από 40%.

Εξωτερικοί Πόροι και Περαιτέρω Ανάγνωση

• React Native Official Docs ⁇ Βελτιστοποίηση JavaScript Loading
• Αντιδραστικό πλοήγησης ⁇ Οθόνη Lazy Loading
• Callstack Blog ⁇ Κωδικός Splitting in React Native

Συμπέρασμα

Η τεμπέλικη φόρτωση δεν είναι ασημένια σφαίρα, αλλά όταν εφαρμόζεται σωστά, είναι ένα από τα πιο ισχυρά εργαλεία σε ένα React Native εργαλείο απόδοσης προγραμματιστή. Με την αναβολή της φόρτωσης των μη ουσιωδών συστατικών, εικόνες, και οθόνες, μπορείτε να περικόψετε δραματικά τους αρχικούς χρόνους φόρτωσης, να μειώσετε την πίεση μνήμης, και να παραδώσει μια μεταξένια-smooth εμπειρία στους χρήστες σας. Ξεκινήστε με τους βαρύτερους παραβάτες στην εφαρμογή σας ⁇ πιθανώς πιτσιλίζοντας οθόνες, σύνθετα διαγράμματα, ή σπάνια επισκεπτόμενοι καρτέλες ⁇ και σταδιακά να επεκτείνετε τεμπέληδες φόρτωση σε άλλα μέρη. Θυμηθείτε να μετρήσετε, να δοκιμάσετε σε πραγματικές συσκευές, και να παράσχετε χαριτωμένες αποτυχίες. Με προσεκτική εφαρμογή, η τεμπέλικη φόρτωση θα κάνει την React Native εφαρμογή σας να αισθάνεται πιο γρήγορη και πιο επαγγελματική.