Δωρεάν μετατροπέας

JavaScript Minifier

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

Σύρετε και αποθέστε ένα αρχείο JS εδώ

Υποστηρίζει αρχεία .js. Ή επικολλήστε το JavaScript παραπάνω.

Ή

Σχετικά με αυτό το εργαλείο

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

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

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

Γιατί να ελαχιστοποιήσετε το JavaScript

Τα πακέτα JavaScript είναι συνήθως ο μεγαλύτερος μεμονωμένος πόρος σε μια σύγχρονη ιστοσελίδα. Η ελαχιστοποίηση προκαλεί συνήθως μείωση μεγέθους 30–60% έναντι της μη ελαχιστοποιημένης πηγής. Σε συνδυασμό με το gzip ή το Brotli, η μείωση συρρικνώνεται κάπως, αλλά ο συνδυασμός εξακολουθεί να εξοικονομεί μετρήσιμα byte — ιδιαίτερα για χρήστες με αργές συνδέσεις.

Ταχύτερη JavaScript σημαίνει επίσης ταχύτερο χρόνο για διαδραστική. Τα μικρότερα σενάρια κατεβαίνουν πιο γρήγορα, αναλύονται πιο γρήγορα και εκτελούνται νωρίτερα. Για ιστότοπους όπου το TTI επηρεάζει τα ποσοστά εγκατάλειψης και την κατάταξη SEO, η ελαχιστοποίηση είναι μία από τις φθηνότερες διαθέσιμες νίκες.

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

Επικολλήστε JavaScript, αποκτήστε μια μικρότερη έκδοση.

  1. Προσθήκη εισαγωγής JavaScript: Επικολλήστε την πηγή στην περιοχή εισόδου ή αποθέστε ένα αρχείο .js. Ο minifier δέχεται σύγχρονη JavaScript (ES2015+), συμπεριλαμβανομένων των συναρτήσεων βέλους, των κυριολεκτικών προτύπων, των κλάσεων και των λειτουργικών μονάδων.
  2. Επιλέξτε επιλογές: Οι προεπιλογές αφαιρούν τα σχόλια και συμπτύσσουν το κενό διάστημα. Η μετονομασία της τοπικής μεταβλητής είναι συντηρητική. ενεργοποιήστε την πιο επιθετική μετονομασία εάν χρειάζεστε μέγιστη συμπίεση.
  3. Ελαχιστοποίηση: Ο minifier αναλύει την πηγή, αφαιρεί τα κενά και τα σχόλια και εκπέμπει συμπαγή έξοδο. Τα συντακτικά σφάλματα στην πηγή παράγουν σαφή μηνύματα σφάλματος.
  4. Χρησιμοποιήστε την έξοδο: Αντικαταστήστε την πηγή του σεναρίου σας στην παραγωγή. Για πλήρη βελτιστοποίηση, πραγματοποιήστε σύζευξη με ένα bundler που χειρίζεται το κούνημα των δέντρων και την εξάλειψη του νεκρού κώδικα.

Κοινές περιπτώσεις χρήσης

Τεχνικές λεπτομέρειες

Το minifier κάνει tokenize το JavaScript χρησιμοποιώντας έναν αναλυτή που σέβεται τη σύνταξη ECMAScript. Τα σχόλια (μονής γραμμής και πολλών γραμμών) αφαιρούνται εκτός από τα σχόλια άδειας χρήσης που επισημαίνονται με /*! πρόθεμα. Το κενό διάστημα συμπτύσσεται εκτός από όπου απαιτείται συντακτικά (μεταξύ αναγνωριστικών, μετά από λέξεις-κλειδιά).

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

Περιπτώσεις άκρων: αυτόματη εισαγωγή ερωτηματικών (ASI) σημαίνει ότι ο μινιφιέρης πρέπει να διατηρεί τις νέες γραμμές σε ορισμένα περιβάλλοντα για να αποφευχθεί η αλλαγή της συμπεριφοράς του προγράμματος. Οι κυριολεκτικές λέξεις προτύπων, οι κυριολεκτικές λέξεις regex και το JSX (εάν η είσοδος το περιλαμβάνει) διατηρούνται ακριβώς επειδή το περιεχόμενό τους ενδέχεται να μην είναι ασφαλές για συμπίεση.

Βέλτιστες Πρακτικές

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

Η ελαχιστοποίηση αλλάζει τον τρόπο λειτουργίας του κώδικά μου;
Όχι. Η ελαχιστοποίηση αφαιρεί το κενό διάστημα και τα σχόλια, τα οποία δεν επηρεάζουν την εκτέλεση. Η συντόμευση μεταβλητής (mangling) μετονομάζει τις τοπικές μεταβλητές αλλά διατηρεί τη συμπεριφορά. Οι καθολικές μεταβλητές και τα εξαγόμενα ονόματα διατηρούνται ανέπαφα.
Πρέπει να ελαχιστοποιήσω την ανάπτυξη ή την παραγωγή;
Χρησιμοποιήστε μόνο ελαχιστοποιημένο κώδικα στην παραγωγή. Κατά την ανάπτυξη, διατηρήστε τον αρχικό αναγνώσιμο κώδικα. Τα περισσότερα εργαλεία κατασκευής (Webpack, Vite, esbuild) χειρίζονται αυτόματα την ελαχιστοποίηση ως μέρος της διαδικασίας κατασκευής παραγωγής.
Ποια είναι η διαφορά μεταξύ ελαχιστοποίησης και συσκότισης;
Η ελαχιστοποίηση μειώνει το μέγεθος ενώ διατηρεί τον κώδικα λειτουργικά αναγνώσιμο εάν έχει μορφοποιηθεί. Η συσκότιση κάνει σκόπιμα δυσνόητο τον κώδικα (κωδικοποίηση συμβολοσειράς, έλεγχος ισοπέδωσης ροής). Αυτό το εργαλείο εστιάζει στη μείωση του μεγέθους, όχι στη συσκότιση.
Πόσο μείωση μεγέθους πρέπει να περιμένω;
Συνήθως 30-60% πριν από το gzip. Ο καλά σχολιασμένος κώδικας με μεγάλα ονόματα μεταβλητών παρουσιάζει τις μεγαλύτερες μειώσεις. Σε συνδυασμό με τη συμπίεση gzip, τα αρχεία JavaScript είναι συχνά 80-90% μικρότερα από την αρχική πηγή.
Ο κωδικός μου μεταφορτώνεται σε διακομιστή;
Όχι. Το minifier εκτελείται στο πρόγραμμα περιήγησής σας.
Πόσο μικρότερο θα είναι το JavaScript μου;
Τυπικά μείωση 30-60%. Ο μεταβλητός-βαρύς κώδικας με μεγάλα αναγνωριστικά συμπιέζει περισσότερο. Ο βαρύς κώδικας έκφρασης συμπιέζει λιγότερο.
Πρέπει να μινιμοποιήσω με το χέρι;
Ποτέ. Διατηρήστε αναγνώσιμη JavaScript στην πηγή. Εκτελέστε την ελαχιστοποίηση ως βήμα κατασκευής ή ως μέρος της ανάπτυξης.
Λειτουργεί σε TypeScript;
Το TypeScript πρέπει πρώτα να μεταγλωττιστεί σε JavaScript χρησιμοποιώντας tsc ή esbuild. Μόλις μεταγλωττιστεί, το JavaScript που προκύπτει μπορεί να ελαχιστοποιηθεί.