Ελαχιστοποίηση & Μορφοποίηση JavaScript

Τι είναι αυτό το εργαλείο;

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

Αυτό το εργαλείο βασίζεται στο Terser, τον ελαχιστοποιητή βασισμένο σε AST που χρησιμοποιείται από τα webpack, Vite, Rollup και τα περισσότερα σύγχρονα εργαλεία build JavaScript. Επειδή πραγματικά αναλύει τον κώδικά σας αντί να αναζητά μοτίβα κειμένου, διακρίνει σωστά έναν τελεστή διαίρεσης από μια κανονική έκφραση, δεν χαλάει template strings που περιέχουν ακολουθίες που μοιάζουν με //, και δεν θα μετονομάσει μια μεταβλητή σε όνομα που συγκρούεται με κάτι σε εξωτερική εμβέλεια.

Γιατί να το χρησιμοποιήσετε;

• Ελαχιστοποίηση βασισμένη σε AST (Terser), η ίδια μηχανή που χρησιμοποιούν τα μεγάλα bundlers — ασφαλής με κανονικές εκφράσεις, template strings και closures.
• Μετατρέπει ονόματα μεταβλητών για πραγματική εξοικονόμηση μεγέθους, όχι απλή αφαίρεση κενών.
• Δείτε ακριβώς πόσα bytes και τι ποσοστό εξοικονομήσατε.
• Η λειτουργία μορφοποίησης μετατρέπει αδιαφανές, μονογραμμικό ελαχιστοποιημένο JS ξανά σε ευανάγνωστο, με εσοχή κώδικα — χρήσιμο για την κατανόηση scripts τρίτων.
• 100% τοπική επεξεργασία — ο ιδιόκτητος κώδικάς σας δεν φεύγει ποτέ από το πρόγραμμα περιήγησής σας.

Πώς χρησιμοποιείται

1. Επικολλήστε το JavaScript σας στο πλαίσιο εισαγωγής, ή κάντε κλικ στο «Load Example» για να δοκιμάσετε ένα δείγμα με κανονική έκφραση και template string.
2. Κάντε κλικ στο «Minify» για συμπίεση, ή στο «Format» για μορφοποίηση με εσοχή 2 κενών.
3. Ελέγξτε το μήνυμα κάτω από τα πλαίσια — η λειτουργία minify δείχνει τη μείωση μεγέθους· ένα συντακτικό σφάλμα στον κώδικά σας εμφανίζει ένα σαφές μήνυμα αντί να παράγει σιωπηρά χαλασμένο αποτέλεσμα.
4. Κάντε κλικ στο «Copy» για να πάρετε το αποτέλεσμα.

Παράδειγμα

Είσοδος

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Έξοδος

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Τα ονόματα μεταβλητών συντομεύονται, το σχόλιο και η δήλωση if συμπτύσσονται σε μια έκφραση, αλλά η κανονική έκφραση και το template string διατηρούνται ακριβώς και η συμπεριφορά παραμένει αμετάβλητη.

Πρακτικές συμβουλές

• Ελαχιστοποιήστε κατά το build, όχι με χειροκίνητη επεξεργασία — κρατήστε ευανάγνωστο πηγαίο κώδικα υπό έλεγχο εκδόσεων και δημιουργήστε το ελαχιστοποιημένο bundle ως βήμα build.
• Αν το ελαχιστοποιημένο αποτέλεσμα συμπεριφέρεται απροσδόκητα, ελέγξτε για κώδικα που βασίζεται στο Function.prototype.name ή σε reflection — η μετατροπή ονομάτων μετονομάζει συναρτήσεις και αυτό μπορεί να εμφανιστεί σε σπάνιες περιπτώσεις.
• Η μορφοποίηση ενός script τρίτου πριν το διαβάσετε είναι πολύ πιο γρήγορη από το να προσπαθείτε να αναλύσετε μία μόνο γραμμή 2.000 χαρακτήρων.
• Συνδυάστε με τους ελαχιστοποιητές HTML και CSS παρακάτω αν προετοιμάζετε ένα πλήρες στατικό bundle για ανάπτυξη.

Πού ταιριάζει σε πραγματικές ροές εργασίας

Το JavaScript είναι συνήθως το μεγαλύτερο στοιχείο που εμποδίζει την απόδοση ή την ανάλυση σε μια σελίδα, οπότε η ελαχιστοποίησή του έχει πραγματικό, μετρήσιμο αντίκτυπο στον χρόνο φόρτωσης — περισσότερο από HTML ή CSS byte-προς-byte. Τα περισσότερα σύγχρονα frameworks το κάνουν αυτό αυτόματα κατά το build, αλλά χειρόγραφα scripts, επεκτάσεις προγράμματος περιήγησης και bookmarklets συχνά διανέμονται χωρίς ελαχιστοποίηση εκτός αν κάποιος τα περάσει από εργαλείο σαν αυτό.

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

→ Συμπιεστής HTML · CSS Minifier

Συνηθισμένες περιπτώσεις χρήσης

• Συρρίκνωση ενός αυτόνομου script ή bookmarklet πριν τη δημοσίευσή του.
• Επαναμορφοποίηση ενός ελαχιστοποιημένου script από έναν ζωντανό ιστότοπο για να κατανοήσετε τι κάνει.
• Καθαρισμός JavaScript επικολλημένου από ανάρτηση φόρουμ ή απόσπασμα δημιουργημένο από AI πριν το διαβάσετε προσεκτικά.
• Γρήγορος έλεγχος αν ένα χειρόγραφο απόσπασμα JS έχει συντακτικό σφάλμα, αφού μια αποτυχία ανάλυσης εμφανίζεται ως ρητό μήνυμα.

Συχνές ερωτήσεις