JavaScript Minifier

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

Τρέχει στον browser σαςΧωρίς εγγραφήΤίποτα δεν ανεβαίνει

Ελαχιστοποιημένη έξοδος

Πώς να χρησιμοποιήσετε: JavaScript Minifier

  1. Επικολλήστε τη JavaScript σας ή ανοίξτε ένα αρχείο .js.
  2. Επιλέξτε ρυθμίσεις: η Σύντμηση ονομάτων συντομεύει τις τοπικές μεταβλητές, η Συμπίεση ξαναγράφει τον κώδικα σε μικρότερο ισοδύναμο και το ES module επιτρέπει import/export στο ανώτατο επίπεδο.
  3. Διαλέξτε τον στόχο ECMAScript που υποστηρίζουν οι browsers των χρηστών σας. Το ES2020 είναι ασφαλές για όλους τους evergreen browsers.
  4. Ελέγξτε το μέγεθος, την εξοικονόμηση και την εκτίμηση gzip κάτω από την έξοδο.
  5. Αντιγράψτε τον ελαχιστοποιημένο κώδικα ή κατεβάστε τον ως output.min.js.

Τι κάνει ένας JavaScript minifier;

Η ελαχιστοποίηση κάνει τη JavaScript μικρότερη χωρίς να αλλάζει τη λειτουργία της. Το εργαλείο χρησιμοποιεί το Terser, τον minifier πίσω από τα webpack, Vite και Rollup, και εφαρμόζει τρία είδη αλλαγών:

  • Αφαίρεση κενών και σχολίων: οι εσοχές, οι αλλαγές γραμμής και τα σχόλια δεν χρειάζονται στη μηχανή JavaScript.
  • Mangling: ονόματα τοπικών μεταβλητών και παραμέτρων συναρτήσεων, όπως subtotal, γίνονται μονά γράμματα. Τα global ονόματα και οι ιδιότητες αντικειμένων μένουν ανέγγιχτα, ώστε το δημόσιο API σας να συνεχίζει να λειτουργεί.
  • Συμπίεση: οι σταθερές εκφράσεις υπολογίζονται εκ των προτέρων, ο μη προσβάσιμος κώδικας αφαιρείται, οι εντολές if γίνονται τριαδικοί τελεστές και οι μικρές συναρτήσεις ενσωματώνονται inline.

Minify ή gzip: χρειάζεστε και τα δύο;

Ναι. Τα gzip και Brotli συμπιέζουν επαναλαμβανόμενα μοτίβα bytes κατά τη μεταφορά, ενώ η ελαχιστοποίηση αφαιρεί bytes που ο browser θα έπρεπε αλλιώς να κατεβάσει, να αναλύσει και να μεταγλωττίσει. Ένα τυπικό script μικραίνει 40–60% με την ελαχιστοποίηση και άλλο 60–70% με το gzip. Το μέγεθος gzip που εμφανίζεται εδώ είναι καλή εκτίμηση του τι θα στείλει πραγματικά ο server σας.

Διατήρηση σχολίων άδειας

Πολλές άδειες ανοιχτού κώδικα (MIT, BSD, Apache) απαιτούν η σημείωση πνευματικών δικαιωμάτων να συνοδεύει τον κώδικα. Κατά σύμβαση, τα σχόλια που ξεκινούν με /*! ή περιέχουν @license ή @preserve διατηρούνται όταν είναι ενεργή η Διατήρηση σχολίων άδειας.

Πότε να μην ελαχιστοποιείτε με το χέρι

Αν το project σας χρησιμοποιεί ήδη bundler, αφήστε τον να ελαχιστοποιεί τα production builds και να παράγει source maps για debugging. Ένας online minifier είναι ιδανικός για μεμονωμένα scripts, αποσπάσματα για CMS ή tag manager, bookmarklets και για να δείτε πόσο μικρό μπορεί να γίνει ένα κομμάτι κώδικα.

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

Ανεβαίνει ο κώδικάς μου σε server;
Όχι. Το Terser τρέχει μέσα στην καρτέλα του browser σας, οπότε ο ιδιόκτητος κώδικας δεν φεύγει ποτέ από τον υπολογιστή σας.
Μπορεί η ελαχιστοποίηση να χαλάσει τον κώδικά μου;
Το Terser εφαρμόζει μόνο μετασχηματισμούς που διατηρούν την ίδια συμπεριφορά για έγκυρη JavaScript. Κώδικας που βασίζεται στο Function.prototype.toString() ή σε ονόματα τοπικών μεταβλητών μέσω eval μπορεί να επηρεαστεί· σε αυτή την περίπτωση απενεργοποιήστε τη Σύντμηση ονομάτων.
Υποστηρίζει σύγχρονη σύνταξη όπως async/await, classes και optional chaining;
Ναι. Το Terser αναλύει σύνταξη ES2022+. Η ρύθμιση στόχου ελέγχει μόνο ποια σύνταξη μπορεί να χρησιμοποιεί η έξοδος· δεν κάνει transpile νεότερα χαρακτηριστικά σε παλαιότερα.
Ποια η διαφορά μεταξύ minify και uglify;
Σημαίνουν το ίδιο πράγμα. Το UglifyJS ήταν το κλασικό εργαλείο· το Terser είναι το συντηρούμενο fork του με πλήρη υποστήριξη ES2015+.

Σχετικά εργαλεία

CSS Minifier Μικρότερα stylesheets: σύντομες τιμές και συγχώνευση διπλών κανόνων. HTML Minifier Αφαίρεση σχολίων και κενών, ελαχιστοποίηση inline CSS/JS. JSON Formatter Μορφοποίηση, συμπίεση και επικύρωση JSON με σφάλματα ανά γραμμή/στήλη. SQL Formatter Μορφοποίηση ή ελαχιστοποίηση SQL για PostgreSQL, MySQL, T-SQL, BigQuery κ.ά.