Μορφοποίηση και ελαχιστοποίηση JavaScript

Πώς να μορφοποιήσετε ή να ελαχιστοποιήσετε JavaScript

1. Επικολλήστε τον κώδικά σας ή πατήστε Άνοιγμα αρχείου για να φορτώσετε ένα αρχείο .js, .mjs ή .jsx (έως 10 MB).
2. Επιλέξτε την Εσοχή και, αν προτιμάτε το στυλ Allman, επιλέξτε Αγκύλες σε δική τους γραμμή.
3. Πατήστε Μορφοποίηση (beautify) για να γίνει ο κώδικας ευανάγνωστος.
4. Για να τον μικρύνετε, ορίστε τις Επιλογές ελαχιστοποίησης και πατήστε Ελαχιστοποίηση. Για να αναζητήσετε μόνο σφάλματα, πατήστε Έλεγχος σύνταξης.
5. Αντιγράψτε ή κατεβάστε το αποτέλεσμα. Η γραμμή κατάστασης δείχνει το μέγεθος πριν και μετά και το ποσοστό που εξοικονομήθηκε.

Ο κώδικας απλώς διαβάζεται και μετασχηματίζεται, δεν εκτελείται ποτέ: τίποτα από όσα επικολλάτε δεν τρέχει σε αυτή τη σελίδα.

Μορφοποίηση με το js-beautify

Η Μορφοποίηση (beautify) χρησιμοποιεί το js-beautify. Βάζει μία εντολή ανά γραμμή, δημιουργεί εσοχές στα μπλοκ, προσθέτει κενά γύρω από τους τελεστές και μετά τις λέξεις-κλειδιά και κρατά έως μία κενή γραμμή εκεί που είχατε. Καταλαβαίνει επίσης τη σύγχρονη σύνταξη (κλάσεις, συναρτήσεις βέλους, template literals, async/await) και το JSX. Είναι ο ταχύτερος τρόπος να διαβάσετε μια ελαχιστοποιημένη βιβλιοθήκη ή ένα απόσπασμα μίας γραμμής που αντιγράψατε από μια ιστοσελίδα.

Η μορφοποίηση αλλάζει μόνο τα κενά. Δεν ελέγχει αν ο κώδικας είναι έγκυρος: μια παρένθεση που λείπει απλώς δίνει περίεργες εσοχές. Για αυτό χρησιμοποιήστε το Έλεγχος σύνταξης.

Ελαχιστοποίηση με το Terser

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

• Η Λειτουργική μονάδα ES (import/export) αναλύει τον κώδικα ως μονάδα (module: true): ισχύει η αυστηρή λειτουργία και τα ονόματα ανώτατου επιπέδου είναι ιδιωτικά, οπότε μπορούν να μετονομαστούν και τα αχρησιμοποίητα να αφαιρεθούν. Αφήστε την αποεπιλεγμένη για κλασικό σενάριο του οποίου τις καθολικές συναρτήσεις χρησιμοποιούν άλλα σενάρια.
• Η Συμπίεση (compress) ξαναγράφει τον κώδικα σε συντομότερο ισοδύναμο: υπολογισμός σταθερών (το 2*60 γίνεται 120), αφαίρεση νεκρού κώδικα, συνένωση δηλώσεων var, συντομότερες συνθήκες.
• Η Σμίκρυνση ονομάτων μεταβλητών (mangle) μετονομάζει τις τοπικές μεταβλητές και τις παραμέτρους σε ένα ή δύο γράμματα. Τα καθολικά ονόματα και οι ιδιότητες αντικειμένων δεν μετονομάζονται ποτέ.
• Η Διατήρηση σχολίων άδειας χρήσης κρατά τα σχόλια που ξεκινούν με /*! ή περιέχουν @license ή @preserve. Όλα τα άλλα σχόλια αφαιρούνται.

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

Συντακτικά σφάλματα με γραμμή και στήλη

Όταν το Terser δεν μπορεί να αναλύσει τον κώδικα, η Ελαχιστοποίηση και ο Έλεγχος σύνταξης δείχνουν το μήνυμα σφάλματος με τη γραμμή και τη στήλη του, για παράδειγμα «Γραμμή 12, στήλη 8 – Συντακτικό σφάλμα: Unexpected token punc «)»». Η στήλη μετράει χαρακτήρες ξεκινώντας από το 1. Τυπική αιτία είναι μια αγκύλη που λείπει νωρίτερα στο αρχείο, γι’ αυτό κοιτάξτε και τις γραμμές ακριβώς πριν από την αναφερόμενη θέση. Τα μηνύματα σφάλματος του αναλυτή εμφανίζονται στα αγγλικά.