Code Splitting
Το code splitting είναι μια τεχνική που σπάει ένα μεγάλο JavaScript bundle σε μικρότερα τμήματα που φορτώνονται κατά απαίτηση, ώστε οι χρήστες να κατεβάζουν μόνο τον κώδικα που χρειάζονται για τη σελίδα που βλέπουν.
Οι σύγχρονες διαδικτυακές εφαρμογές μπορούν να έχουν εκατομμύρια γραμμές JavaScript. Χωρίς code splitting, όλος αυτός ο κώδικας συγκεντρώνεται σε ένα μόνο αρχείο που κάθε χρήστης πρέπει να κατεβάσει πριν η εφαρμογή γίνει διαδραστική, ακόμη κι αν επισκέπτεται μόνο μία σελίδα. Το code splitting χωρίζει το πακέτο της εφαρμογής σε μικρότερα τμήματα με βάση τις διαδρομές, τα components ή τις λειτουργίες. Όταν ένας χρήστης επισκέπτεται την αρχική σελίδα, κατεβάζει μόνο τον κώδικα της αρχικής σελίδας.
Όταν μεταβαίνει στη σελίδα ρυθμίσεων, ο κώδικας αυτός φορτώνεται κατά απαίτηση. Οι βιβλιοθήκες που χρησιμοποιούνται μόνο σε συγκεκριμένες λειτουργίες χωρίζονται σε δικά τους τμήματα. Υπάρχουν αρκετές προσεγγίσεις για το code splitting. Το splitting βάσει διαδρομής φορτώνει τον κώδικα κάθε σελίδας ξεχωριστά (η πιο συνηθισμένη προσέγγιση). Το splitting βάσει component φορτώνει βαριά components κατά απαίτηση (όπως έναν επεξεργαστή εμπλουτισμένου κειμένου που χρειάζεται μόνο κατά την επεξεργασία). Το splitting βιβλιοθηκών διαχωρίζει τις εξωτερικές εξαρτήσεις σε δικά τους τμήματα που μπορούν να αποθηκευτούν στην προσωρινή μνήμη.
Στην πράξη
- Ένας πίνακας SaaS μείωσε το αρχικό πακέτο JavaScript από 3,2MB σε 450KB μέσω code splitting βάσει διαδρομής, κάνοντας τη σελίδα σύνδεσης να φορτώνει σε λιγότερο από 2 δευτερόλεπτα αντί για 8
- Ένα ηλεκτρονικό κατάστημα φόρτωσε κατά απαίτηση το component αξιολογήσεων προϊόντων (που περιλάμβανε βαρύ επεξεργαστή εμπλουτισμένου κειμένου), εξοικονομώντας 200KB από την αρχική φόρτωση της σελίδας προϊόντος
- Μια εφαρμογή Next.js κάνει αυτόματα code splitting ανά διαδρομή, οπότε η αρχική σελίδα της 50σέλιδης εφαρμογής τους φορτώνει μόνο 120KB JavaScript αντί για τα συνολικά 4MB
- Μια διαδικτυακή εφαρμογή χώρισε τη βιβλιοθήκη γραφημάτων σε ξεχωριστό τμήμα, ώστε οι χρήστες που δεν επισκέπτονται ποτέ τον πίνακα αναλυτικών στοιχείων να μην κατεβάζουν τη βιβλιοθήκη γραφημάτων των 500KB
Περισσότερα για: Απόδοση
Δεν είστε σίγουροι πώς εφαρμόζεται σε εσάς;
Ένας έμπειρος μηχανικός εξετάζει τον ιστότοπό σας, την παρουσία σας στις αναζητήσεις και τον τρόπο που σας φτάνουν τα αιτήματα, και μετά καταγράφει τα τρία πράγματα που αξίζει να διορθωθούν πρώτα. Κρατάτε το έγγραφο είτε έτσι είτε αλλιώς.