Το μόνο που χρειάζεται να ξέρετε για τον κωδικό JavaScript Spliting

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

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

• Πώς να κωδικοποιήσετε ταχύτερα, ελαφρύτερα JavaScript

Ποιο πρόβλημα λύνει ο κώδικας σχισίματος;

Όταν ένα πρόγραμμα περιήγησης ιστού βλέπει ένα & lt; script & gt; Πρέπει να περάσετε χρόνο τη λήψη και την επεξεργασία της javascript που αναφέρουμε. Αυτό μπορεί να αισθάνεται γρήγορα σε συσκευές υψηλού επιπέδου, αλλά η φόρτωση, η ανάλυση και η εκτέλεση του αχρησιμοποίητου κώδικα JavaScript μπορεί να διαρρηγνυθεί σε μέσες κινητές συσκευές με βραδύτερο δίκτυο και βραδύτερη CPU. Εάν έπρεπε να συνδεθείτε ποτέ στο καφενείο ή στο ξενοδοχείο WiFi, γνωρίζετε ότι οι αργές εμπειρίες του δικτύου μπορούν να συμβούν σε όλους.

Κάθε δευτερόλεπτο που αναμένεται να περιμένει το javascript για να ολοκληρωθεί η εκκίνηση μπορεί να καθυστερήσει πόσο σύντομα οι χρήστες μπορούν να αλληλεπιδράσουν με την εμπειρία σας. Αυτό ισχύει ιδιαίτερα αν το UX σας βασίζεται σε JS για κρίσιμα συστατικά ή ακόμα και απλά να συνδέσετε χειριστές συμβάντων για απλά κομμάτια UI.

Χρειάζεται να ασχοληθώ με τον διαχωρισμό κώδικα;

Αξίζει σίγουρα να ζητήσετε από τον εαυτό σας αν πρέπει να χτυπήσετε-σχίσιμο (εάν έχετε χρησιμοποιήσει ένα απλό οικοδόμος ιστότοπου πιθανότατα δεν το κάνετε). Εάν ο ιστότοπός σας απαιτεί Javascript για διαδραστικό περιεχόμενο (για λειτουργίες όπως συρτάρια και καρουσέλες μενού) ή είναι μια εφαρμογή μιας σελίδας που βασίζεται σε javascript πλαίσια για να καταστήσει το UI, η απάντηση είναι πιθανή "ναι". Είτε η διάσπαση του κώδικα αξίζει τον κόπο σας είναι μια ερώτηση που θα χρειαστεί να απαντήσετε στον εαυτό σας. Καταλαβαίνετε την αρχιτεκτονική σας και πώς ο ιστότοπός σας φορτώνει καλύτερα. Ευτυχώς υπάρχουν διαθέσιμα εργαλεία για να σας βοηθήσουν εδώ. Θυμηθείτε ότι εάν εφαρμόζετε αλλαγές στο σύστημα σχεδιασμού σας, αποθηκεύστε αυτές τις αλλαγές στο κοινό σας αποθήκευση σύννεφων Έτσι η ομάδα σας μπορεί να δει.

Ζήτα βοήθεια

Για αυτούς τους νέους στο JavaScript Code Spliting, Φάρος - Ο πίνακας ελέγχου σε εργαλεία προγραμματιστών χρώμιο - μπορεί να βοηθήσει να λάμψει ένα φως στο αν αυτό είναι ένα πρόβλημα για τον ιστότοπό σας. Ο έλεγχος που θα θελήσετε να αναζητήσετε είναι να μειώσετε το χρόνο εκτέλεσης JavaScript (τεκμηρίωση εδώ ). Αυτός ο έλεγχος υπογραμμίζει όλα τα σενάρια στη σελίδα σας που μπορεί να καθυστερήσει έναν χρήστη να αλληλεπιδρά με αυτό.

PageSPEED Insights Είναι ένα ηλεκτρονικό εργαλείο που μπορεί επίσης να επισημάνει την απόδοση του ιστότοπού σας - και περιλαμβάνει τα εργαστηριακά δεδομένα από το φάρο και τα δεδομένα πραγματικού κόσμου στην απόδοση του ιστότοπού σας από την έκθεση εμπειρίας χρηστών Chrome. Τα δικα σου web hosting Η υπηρεσία μπορεί να έχει άλλες επιλογές.

Κάλυψη κώδικα σε εργαλεία προγραμματιστή χρώμιο

Αν φαίνεται ότι έχετε δαπανηρά σενάρια που θα μπορούσαν να είναι καλύτερα να χωριστούν, το επόμενο εργαλείο που θα κοιτάξει είναι η λειτουργία κάλυψης κώδικα στα εργαλεία προγραμματιστών Chrome (DevTools & GT; Top-Right Menu & GT; Περισσότερα Εργαλεία & GT; Κάλυψη). Αυτό είναι στη σελίδα σας η μη χρησιμοποιημένη JavaScript (και CSS) στη σελίδα σας. Για κάθε script που συνοψίζεται, οι Devtools θα δείξουν τις «αχρησιμοποίητες bytes». Αυτός είναι ο κώδικας που μπορείτε να εξετάσετε τη διάσπαση και την τεμπέλωση φόρτωση όταν το χρειάζεται ο χρήστης.

Τα διάφορα είδη διαχωρισμού κώδικα

Υπάρχουν μερικές διαφορετικές προσεγγίσεις που μπορείτε να πάρετε όταν πρόκειται για τον κώδικα διαχωρισμού JavaScript. Πόσο αυτά ισχύουν για τον ιστότοπό σας τείνουν να διαφέρουν ανάλογα με το αν θέλετε να χωρίσετε τη σελίδα / την «λογική της εφαρμογής» ή να χωρίσετε τις βιβλιοθήκες / πλαίσια από άλλους «προμηθευτές».

Δυναμική διάσπαση κώδικα: Πολλοί από εμάς «στατικά» εισαχθούν μονάδες JavaScript και εξαρτήσεις, έτσι ώστε να συνδυάζονται μαζί σε ένα αρχείο κατά το χρόνο κατασκευής. Το "Dynamic" Code Spliting προσθέτει την ικανότητα να ορίζει τα σημεία στο JavaScript σας ότι θα θέλατε να χωρίσετε και τεμπέλης φορτίο ανάλογα με τις ανάγκες. Η σύγχρονη JavaScript χρησιμοποιεί τη δυναμική εισαγωγή() δήλωση για την επίτευξη αυτού του στόχου. Θα το καλύψουμε πιο σύντομα.

Κωδικός προμηθευτή Διαίρεση: Τα πλαίσια και οι βιβλιοθήκες που βασίζονται στο (π.χ. αντιδράστε, γωνιακό, vue ή Lodash) είναι απίθανο να αλλάξουν στα σενάρια που στέλνετε στους χρήστες σας, συχνά ως «λογική» για τον ιστότοπό σας. Για να μειώσετε τον αρνητικό αντίκτυπο της ακύρωσης της κρυφής μνήμης για τους χρήστες που επιστρέφουν στον ιστότοπό σας, μπορείτε να χωρίσετε τους "προμηθευτές" σας σε ξεχωριστό σενάριο.

Κωδικός εισόδου-σημείο Διαίρεση: Οι καταχωρήσεις είναι τα σημεία εκκίνησης στον ιστότοπό σας ή στην εφαρμογή σας ότι ένα εργαλείο όπως το webpack μπορεί να εξετάσει για να δημιουργήσει το δέντρο εξάρτησης. Η διάσπαση από τις καταχωρήσεις είναι χρήσιμη για σελίδες όπου δεν χρησιμοποιείται η δρομολόγηση του πελάτη ή βασίζεστε σε ένα συνδυασμό διακομιστή και απόδοση πελάτη.

Για τους σκοπούς μας σε αυτό το άρθρο, θα επικεντρωθούμε σε διαχωρισμό δυναμικού κώδικα.

Πάρτε τα χέρια με τον διαχωρισμό κώδικα

Ας βελτιστοποιήσουμε την απόδοση Javascript ενός Απλή εφαρμογή που ταξινομεί τρεις αριθμούς Μέσω του διαχωρισμού κώδικα - Αυτή είναι μια εφαρμογή από τον συνάδελφό μου Houssein Djirdeh. Η ροή εργασίας θα χρησιμοποιούμε για να κάνουμε το φορτίο JavaScript γρήγορα, να βελτιστοποιηθεί και να παρακολουθεί. Ξεκινήστε εδώ .

Μετρήστε την απόδοση

Πριν από την προσπάθεια προσθήκης τυχόν βελτιστοποιήσεων, πρώτα θα μετρήσουμε την απόδοση της JavaScript μας. Καθώς η εφαρμογή Magic Sorter φιλοξενείται σε glitch, θα χρησιμοποιήσουμε το κωδικοποιητικό περιβάλλον. Εδώ είναι πώς να το πάτε:

• Κάντε κλικ στο κουμπί Εμφάνιση ζωντανού.
• Ανοίξτε τα Devtools πιέζοντας την επιλογή CMD + + I / Ctrl + Shift + I.
• Επιλέξτε τον πίνακα δικτύου.
• Βεβαιωθείτε ότι ελέγχεται η απενεργοποίηση της κρυφής μνήμης και επαναφόρτωση της εφαρμογής.

Αυτή η απλή εφαρμογή φαίνεται να χρησιμοποιεί 71,2 kb javascript μόνο για να ταξινομήσει με λίγους αριθμούς. Αυτό σίγουρα δεν φαίνεται σωστό. Στην πηγή μας SRC / Index.js , η βιβλιοθήκη χρησιμότητας Lobash εισάγεται και χρησιμοποιούμε ταξινόμηση κατά - Ένα από τα βοηθητικά προγράμματα διαλογής - για να ταξινομήσετε τους αριθμούς μας. Το Lodash προσφέρει πολλές χρήσιμες λειτουργίες, αλλά η εφαρμογή χρησιμοποιεί μόνο μία μόνο μέθοδο από αυτήν. Είναι ένα συνηθισμένο λάθος να εγκαταστήσετε και να εισαγάγετε όλη την εξάρτηση από τρίτο μέρος, όταν στην πραγματικότητα χρειάζεται μόνο να χρησιμοποιήσετε ένα μικρό μέρος του.

Βελτιστοποιήστε τη δέσμη σας

Υπάρχουν μερικές διαθέσιμες επιλογές για το κόψιμο του JavaScript Bundle Μέγεθος:

1. Γράψτε μια προσαρμοσμένη μέθοδο ταξινόμησης αντί να βασίζεστε σε μια βιβλιοθήκη τρίτων.
2. Χρήση Array.prottotype.sort () , που είναι ενσωματωμένη στο πρόγραμμα περιήγησης.
3. Εισάγετε μόνο το ταξινόμηση κατά Μέθοδος από το Lodash αντί για ολόκληρη τη βιβλιοθήκη.
4. Κατεβάστε μόνο τον κωδικό για τη διαλογή όταν ο χρήστης χρειάζεται αυτό (όταν κάνουν κλικ σε ένα κουμπί).

Οι επιλογές 1 και 2 είναι κατάλληλες για τη μείωση του μεγέθους της δέσμης μας - αυτά πιθανότατα έχουν νόημα για μια πραγματική εφαρμογή. Για διδασκαλία, θα δοκιμάσουμε κάτι διαφορετικό. Οι επιλογές 3 και 4 συμβάλλουν στη βελτίωση της απόδοσης της εφαρμογής.

Εισάγετε μόνο τον κώδικα που χρειάζεστε

Θα τροποποιήσουμε μερικά αρχεία για να εισαγάγετε μόνο το μόνο ταξινόμηση κατά Μέθοδος που χρειαζόμαστε από το Lodash. Ας ξεκινήσουμε με την αντικατάσταση μας lodash εξάρτηση πακέτο.Json :

"lodash": "^4.7.0",

με αυτό:

"lodash.sortby": "^4.7.0",

Στο SRC / Index.js, θα εισάγαμε αυτή την πιο συγκεκριμένη ενότητα:

 JS
Εισαγωγή "./style.css".
Εισαγωγή _ από το "Lodash".
Εισαγωγή sumerby από το "Lodash.Sortby". 

Στη συνέχεια, θα ενημερώσουμε πώς οι τιμές ταξινομούνται:

 JS
form.addeventListener ("υποβολή", e = & gt; {
  e.preventdefault ();
  const τιμές = [είσοδος1.valueasnumber, είσοδος2.Valueasnumber, είσοδος3.ValueasNumber];
  Conct SortedValues ​​= _.Sortby (τιμές);
  Conct sortedvalues ​​= soremby (τιμές);
  Αποτελέσματα.Innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}) · 

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

JavaScript Code Splitting

Το WebPack είναι ένα από τα πιο δημοφιλή μοντέλα μονάδων JavaScript που χρησιμοποιούνται από τους προγραμματιστές Web σήμερα. Είναι «δέσμευση» (συνδυάζει) όλες τις μονάδες JavaScript και άλλα περιουσιακά στοιχεία σε στατικά αρχεία Web browsers μπορούν να διαβάσουν.

Η μοναδική δέσμη σε αυτή την εφαρμογή μπορεί να χωριστεί σε δύο ξεχωριστά σενάρια:

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

Χρησιμοποιώντας δυναμικές εισαγωγές (με το εισαγωγή() Λέξη), ένα δεύτερο σενάριο μπορεί να είναι τεμπέλης κατόπιν ζήτησης. Στην εφαρμογή Magic Numbers, ο κώδικας που δημιουργεί το σενάριο μπορεί να φορτωθεί όπως απαιτείται όταν ο χρήστης κάνει κλικ στο κουμπί. Αρχίζουμε με την κατάργηση της εισαγωγής κορυφαίου επιπέδου για τη μέθοδο ταξινόμησης στο SRC / Index.js :

 Εισαγωγή Wortby από το "Lodash.Sortby". 

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

form.addeventListener ("υποβολή", e = & gt; {
  e.preventdefault ();
  Εισαγωγή ('Lodash.Sortby')
    .then (module = & gt; module.default)
    .Then (sortinput ())
    .Catch (ERR = & GT; {ALERT (ERR)});
});

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

ο εισαγωγή() δήλωση επιστρέφει μια υπόσχεση όταν επιλύσει. Το WebPack θεωρεί αυτό ως σημείο διάσπασης που θα ξεσπάσει σε ξεχωριστό σενάριο (ή ένα κομμάτι). Μόλις επιστραφεί η ενότητα, το module.default χρησιμοποιείται για να αναφερθεί η προεπιλεγμένη εξαγωγή που παρέχεται από lodash . Η υπόσχεση είναι αλυσοδεμένη με άλλη .έπειτα() καλώντας ένα συναγερμός Μέθοδος για την ταξινόμηση των τριών τιμών εισόδου. Στο τέλος της αλυσίδας υπόσχεσης, .σύλληψη() καλείται να χειριστεί όπου η υπόσχεση απορρίπτεται ως αποτέλεσμα σφάλματος.

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

Σε περίπτωση που βλέπετε ένα σφάλμα επένδυσης όπως το σφάλμα ανάλυσης: η εισαγωγή και η εξαγωγή ενδέχεται να εμφανίζονται μόνο στο επάνω επίπεδο ", γνωρίζουν ότι αυτό οφείλεται στη δυναμική σύνταξη εισαγωγής που δεν έχει ακόμη οριστικοποιηθεί. Παρόλο που το υποστηρίζει το WebPack, οι ρυθμίσεις για το ESLINT (ένα εργαλείο επένδυσης JavaScript) που χρησιμοποιούνται από το glitch δεν έχουν ενημερωθεί για να συμπεριλάβει αυτή τη σύνταξη αλλά εξακολουθεί να λειτουργεί.

Το τελευταίο πράγμα που πρέπει να κάνουμε είναι να γράψω το συναγερμός Μέθοδος στο τέλος του αρχείου μας. Αυτό πρέπει να είναι μια λειτουργία που επιστρέφει μια λειτουργία που λαμβάνει την εισαγόμενη μέθοδο από Lodash.Sortby . Η ένθετη λειτουργία μπορεί να ταξινομήσει τις τρεις τιμές εισόδου και να ενημερώσει το DOM:

 const sortinput = () = & gt; {
  Επιστροφή (Sortby) = & GT; {
    const τιμές = [
      input1.valueasnumber,
      input2.valueasnumber,
      input3.valueasnumber
    ]
    Conct sortedvalues ​​= soremby (τιμές);
    Αποτελέσματα.Innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

Παρακολουθήστε τους αριθμούς

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

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

Lazy-Φόρτωση με βιβλιοθήκη ή πλαίσιο Javascript

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

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

 Η εισαγωγή αντιδρά, {αγωνία} από το «αντιδράσει».
Const Περιγραφή = Reart.Lazy (() = & GT; Εισαγωγή ('./ Περιγραφή));
Εφαρμογή λειτουργίας () {
  ΕΠΙΣΤΡΟΦΗ (
    & lt; div & gt;
      & lt; h1 & gt; η ταινία μου & lt; / h1 & gt;
      & lt; Suspense Fallback = "Φόρτωση ..." & GT;
        & lt; περιγραφή / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  )
} 

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

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 317 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 317 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

• 9 από τα καλύτερα πλαίσια JavaScript
• 15 απαραίτητα εργαλεία JavaScript θα πρέπει να χρησιμοποιείτε
• 14 από τα καλύτερα apis javascript