14 Εργαλεία για την ελαχιστοποίηση του Javascript

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

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

Πώς λειτουργεί η λειτουργία της μικροποίησης

Ο καλύτερος τρόπος για να μάθετε τι συμβαίνει όταν μικρύνετε τον κώδικα σας είναι να ρίξετε μια ματιά στο UglifyJS Github Repository. Αυτό το σενάριο χρησιμοποιείται σε πολλούς μετατροπείς σε απευθείας σύνδεση καθώς και σε εργαλεία GUI και εργαλεία γραμμής εντολών όπως το Grunt. Εδώ είναι μερικοί από τους μετασχηματισμούς που εφαρμόζει για να κάνετε τον κωδικό σας πιο σύντομο:

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

Ως ένα γρήγορο παράδειγμα, εδώ είναι μια λειτουργία που ουσιαστικά γράφει κάποιο δεδομένο κείμενο έξω.

 λειτουργία hello (κείμενο) document.write (κείμενο);  

γεια ("Καλώς ήλθατε στο άρθρο")?

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

λειτουργία hello (e) document.write (e) hello ("Καλώς ορίσατε στο άρθρο")

Εργαλεία ελαχιστοποίησης Javascript

Τα εργαλεία που χρησιμοποιούνται για την ελαχιστοποίηση του Javascript μπορούν να κατηγοριοποιηθούν ευρέως σε 3 ομάδες: ηλεκτρονικά εργαλεία, εργαλεία GUI και εργαλεία γραμμής εντολών.

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

Ηλεκτρονικά εργαλεία

• javascript-minifier.com είναι ωραίο εργαλείο με API
• Ο ηλεκτρονικός συμπιεστής YUI είναι ένα ισχυρότερο εργαλείο που χρησιμοποιεί τον συμπιεστή YUI, με πολλές επιλογές και δυνατότητες εξομάλυνσης CSS
• Το jscompress.com είναι ένα minifriter χωρίς φρυγανιές αλλά παίρνει τη δουλειά
• jsmini.com είναι μια άλλη απλή αλλά πλήρως χρησιμοποιήσιμη επιλογή

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

Εργαλεία GUI

• Το Koala είναι ένα δωρεάν εργαλείο για την LESS, SASS compilation, JS minification και πολλά άλλα
• Ο Prepros είναι μια εφαρμοσμένη πλατφόρμα που σας δίνει ακόμα περισσότερες επιλογές
• Το Codekit είναι η επιλογή μου. Πρόκειται για μια πληρωμένη εφαρμογή μόνο για Mac που προσφέρει σύνταξη κώδικα, μικροσκοπήσεις, διακομιστή προεπισκόπησης, διαχείριση πακέτων μωρών και πολλά άλλα
• Το AjaxminGui είναι ένα δωρεάν, ενιαίο εργαλείο των Windows για την μικρογραφία του JS σας
• Το UltraMinifier είναι μια δωρεάν εφαρμογή για OS X, η οποία εξομαλύνει τα CSS και JS με drag and drop
• Μικρότερο είναι ένα εργαλείο OS X το οποίο εξομαλύνει και συγκαλύπτει αρχεία για εσάς

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

Τα μεγαλύτερα εργαλεία GUI (Prepros, Koala, Codekit) είναι εξαιρετικά χρήσιμα για τη διαχείριση των έργων και σας δίνουν κάποιες περισσότερες επιλογές συμπίεσης, αλλά κάνουν χρειάζονται λίγη ρύθμιση. Μια γρήγορη μικρογραφία JS θα χρειαζόταν περίπου 20 δευτερόλεπτα εγκατάστασης, κάτι που είναι πολύ, σε σύγκριση με τη διαδικασία των 2 δευτερολέπτων σε απευθείας σύνδεση ή απλά GUI εργαλεία.

Από την άλλη πλευρά, σας προσφέρουν περισσότερα χαρακτηριστικά σε γενικές γραμμές και σας παρέχουν αυτοματοποίηση. Τα αρχεία JS θα εξομαλύνεστε κάθε φορά που τα αποθηκεύετε, χωρίς να χρειαστεί να τα διαγράψετε με το χέρι. Αν αναπτύσσετε κάτι στο Javascript αυτό είναι σίγουρα ο τρόπος να πάτε.

Εργαλεία γραμμής εντολών

• Το Minify είναι για όσους θέλουν να απλοποιήσουν το JS από τη γραμμή εντολών αλλά δεν θέλουν να δημιουργήσουν κάτι φανταχτερό στο Grunt ή το Gulp
• Το Uglify.js το οποίο έχουμε αναφέρει προηγουμένως είναι επίσης διαθέσιμο ως αυτόνομο εργαλείο γραμμής εντολών
• Το Grunt έχει μια επέκταση για την εξομάλυνση Javascript που ονομάζεται grunt-contrib-uglify
• Ο Gulp έχει επίσης μικροσυστοιχίες JS χρησιμοποιώντας το Uglify.js μέσα από το γκρεμ-uglify

Τα εργαλεία της γραμμής εντολών δεν είναι μόνο για το Linux geeks! Δεν είμαι σπουδαίος στο τερματικό σταθμό, αλλά η δημιουργία έργων όπως η Grunt και η Gulp είναι εύκολη μέσα από την τεράστια τεκμηρίωσή τους. Η άνοδος των εργαλείων γραμμής εντολών είναι η εκπληκτική ευελιξία που έχετε από τις επιλογές στην έξοδο.

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

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

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

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

Κάθε ομάδα εργαλείων έχει τα πλεονεκτήματα και τα μειονεκτήματά τους και στην πραγματικότητα πιθανότατα θα καταλήξετε να χρησιμοποιείτε ένα από καθένα σε κάποιο σημείο ή άλλο. Λάβετε υπόψη ότι όταν βρίσκεστε σε περιβάλλον παραγωγής, θα πρέπει να ελαχιστοποιείτε τον Javascript και το CSS!