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

Τι είναι ο διαχωρισμός κώδικα;

Μια τυπική εφαρμογή React περιλαμβάνει δεκάδες στοιχεία (και κώδικα). Αλλά δεν χρειάζεται να φορτώσετε τα περισσότερα από αυτά τα εξαρτήματα όταν τα φορτώνετε για πρώτη φορά. Ο διαχωρισμός κώδικα συνεπάγεται τον διαχωρισμό των διαφορετικών τμημάτων της εφαρμογής σας και τη φόρτωσή τους μόνο όταν χρειάζεται. Αυτό είναι πολύ πιο αποτελεσματικό από τη φόρτωση ολόκληρης της εφαρμογής ταυτόχρονα.

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

Ανοίξτε μια ιστοσελίδα στο πρόγραμμα περιήγησής σας και, στη συνέχεια, ανοίξτε το DevTools (μπορείτε να κάνετε κλικ στο F12 στο πληκτρολόγιό σας για να το ανοίξετε στο Google Chrome). Στη συνέχεια, μεταβείτε στην καρτέλα Πηγή. Εκεί θα βρείτε όλο τον κώδικα που έχει ληφθεί καθώς πλοηγείστε στη σελίδα. Χωρίς διαχωρισμό κώδικα, το πρόγραμμα περιήγησης κατεβάζει όλα τα αρχεία του έργου σας κατά την αρχική φόρτωση της σελίδας. Αυτό μπορεί να επιβραδύνει τον ιστότοπό σας εάν περιέχει πολλά αρχεία.

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

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

Λειτουργίες διαχωρισμού κώδικα: Χρήση δυναμικής εισαγωγής

Σκεφτείτε την ακόλουθη κατάσταση. Θέλετε η αρχική σας σελίδα να έχει ένα κουμπί. Όταν κάνετε κλικ στο κουμπί, θέλετε να ειδοποιήσετε το άθροισμα των 2 και 2 (που είναι 4). Έτσι δημιουργείτε ένα Home.js στοιχείο και ορίστε την προβολή της αρχικής σας σελίδας.

Σε αυτή την περίπτωση, έχετε δύο επιλογές. Αρχικά, μπορείτε να εισαγάγετε τον κωδικό για την προσθήκη των αριθμών στο επάνω μέρος του Home.js αρχείο. Αλλά εδώ είναι το πρόβλημα. Εάν επρόκειτο να εισαγάγετε τη συνάρτηση στο επάνω μέρος του αρχείου, τότε ο κώδικας θα φορτωθεί ακόμα και όταν δεν έχετε κάνει κλικ στο κουμπί. Μια καλύτερη προσέγγιση θα είναι να φορτώσετε το άθροισμα() λειτουργεί μόνο όταν κάνετε κλικ στο κουμπί.

Για να το πετύχετε αυτό, θα χρειαστεί να πραγματοποιήσετε μια δυναμική εισαγωγή. Αυτό σημαίνει ότι θα εισαγάγετε το άθροισμα() λειτουργία ενσωματωμένη στο στοιχείο κουμπιού. Εδώ είναι ο κώδικας για το ίδιο:

εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() { 
ΕΠΙΣΤΡΟΦΗ ( 
"Σπίτι"> 
Αρχική Σελίδα</h1>
 {
εισαγωγή("../sum.js").έπειτα((μονάδα μέτρησης) => {
 συναγερμός(μονάδα μέτρησης.άθροισμα(2, 2))
 })
 }}
 >
 Άθροισμα και των δύο αριθμών
 </button> 
 </div> 
 ); 
}

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

Στοιχεία διαχωρισμού κώδικα: Χρήση React.lazy και Suspense

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

Ας υποθέσουμε ότι η εφαρμογή σας έχει ένα Σπίτι, Σχετικά με, και Προϊόντα συστατικό. Όταν είσαι στο Σπίτι στοιχείο, δεν έχει νόημα να φορτώσετε το Σχετικά με συστατικό ή το Προϊόντα συστατικό. Πρέπει λοιπόν να τα χωρίσετε μακριά από το Σπίτι Διαδρομή. Ο παρακάτω κώδικας δείχνει πώς να το πετύχετε αυτό:

Αρχικά, πρέπει να εισαγάγετε τις απαιτούμενες λειτουργίες και στοιχεία από το αντιδρώ και react-router-dom ενότητες:

εισαγωγή { Routes, Route, Outlet, Link } από"react-router-dom";
εισαγωγή { τεμπέλης, αγωνία } από"αντιδρώ";

Στη συνέχεια, πρέπει να εισαγάγετε τα στοιχεία δυναμικά χρησιμοποιώντας το τεμπέλης() λειτουργία:

συνθ Σπίτι = τεμπέλης(() =>εισαγωγή("./components/Home"));
συνθ Περίπου = τεμπέλης(() =>εισαγωγή("./components/About"));
συνθ Προϊόντα = τεμπέλης(() =>εισαγωγή("./components/Products"));

Στη συνέχεια, ρυθμίστε τη διάταξη (μενού πλοήγησης). Χρησιμοποιήστε το στοιχείο για απόδοση του στοιχείου που αντιστοιχεί στην τρέχουσα διαδρομή (Σπίτι, Σχετικά με, ή Προϊόντα συστατικό):

λειτουργίαNavWrapper() {
ΕΠΙΣΤΡΟΦΗ (
 <>

Μπορείτε να δείτε ότι τυλίγουμε τα εξαρτήματα μέσα. Αυτό λέει στο React ότι όλα είναι μέσα έχει τη δυνατότητα να φορτωθεί αργά, πράγμα που σημαίνει ότι μπορεί να μην είναι διαθέσιμο αμέσως. Για το λόγο αυτό, το Αγωνία συστατικό έχει α εναλλακτική ιδιοκτησία. Στην περίπτωσή μας, η τιμή είναι απλό κείμενο που λέει "Φόρτωση...". Έτσι, ενώ γίνεται λήψη κάθε σελίδας, θα πει φόρτωση στην οθόνη.

Τέλος, ορίστε τη διαδρομή:

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

"/" στοιχείο ={}>
"/" στοιχείο ={} />
"/προϊόντα" στοιχείο ={} />
"/σχετικά με" στοιχείο ={} />
 </Route>
 </Routes>
 );
}

Τώρα όταν επισκέπτεστε την αρχική σελίδα, το πρόγραμμα περιήγησης φορτώνει μόνο το Home.js αρχείο. Με τον ίδιο τρόπο, όταν κάνετε κλικ στο Σχετικά με συνδέσμου στο μενού πλοήγησης για να επισκεφθείτε τη σελίδα Πληροφορίες, το πρόγραμμα περιήγησης φορτώνει μόνο το About.js αρχείο. Αυτό ισχύει για τη σελίδα Προϊόντα.

Διαίρεση κωδικού υπό όρους

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

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

Δείτε πώς θα μοιάζει αυτός ο κώδικας:

εισαγωγή { τεμπέλης, αγωνία } από"αντιδρώ";
συνθ AdminData = τεμπέλης(() =>εισαγωγή("./AdminData"));
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() { 
συνθ [isAdmin, setIsAdmin] = useState(ψευδής)
ΕΠΙΣΤΡΟΦΗ ( 

"Σπίτι"> 
Αρχική Σελίδα</h1>
 setIsAdmin(προηγ => !prev)}>
 Εναλλαγή Διαχειριστή
 </button> 

Φόρτωση...</h1>}>
 {isAdmin? <Admin Data />: <h2> Όχι ο Διαχειριστής h2>} 
 </Suspense>
 </div> 
 ); 
}

Τώρα, όταν κάνετε κλικ στο κουμπί εναλλαγής, είναι Διαχειριστής θα οριστεί σε αληθής. Ως αποτέλεσμα, η εφαρμογή θα εμφανίσει το που φορτώνεται νωχελικά. Αλλά αν δεν είστε διαχειριστής, τότε η εφαρμογή δεν θα γίνει ποτέ λήψη AdminData.js γιατί δεν θα το χρειαστεί.

Ο διαχωρισμός κώδικα υπό όρους χρησιμοποιεί την ίδια έννοια με απόδοση υπό όρους στο React.

Προηγμένες έννοιες διαχωρισμού κώδικα

Μια προηγμένη τεχνική που μπορείτε να ενεργοποιήσετε κατά τον διαχωρισμό κώδικα είναι οι μεταβάσεις. ο useTransition() Το hook σάς επιτρέπει να κάνετε μη επείγουσες ενημερώσεις που δεν θα αλλάξουν τη διεπαφή χρήστη σας μέχρι να ολοκληρωθεί η ενημέρωση.

Αρχικά, εισάγετε το άγκιστρο:

εισαγωγή {χρήση Μετάβαση} από"αντιδρώ"

Στη συνέχεια καλείτε το γάντζο, το οποίο επιστρέφει εκκρεμεί και startTransition:

συνθ [εκκρεμεί, startTransition] = useTransition()

Τέλος, τυλίξτε τον κωδικό για την ενημέρωση της κατάστασης σας μέσα startTransition():

startTransition(() => {
 setIsAdmin((προηγ) => !προηγούμενο)
})

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

Άλλοι τρόποι βελτιστοποίησης της απόδοσης React

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