Μετάβαση στο περιεχόμενο
🛠️
Whiz Tools

Μικρότερος Κώδικας JavaScript - Δωρεάν Online Βελτιστοποιητής JS Κώδικα

Δωρεάν εργαλείο μικρότερου κώδικα JavaScript για μείωση μεγέθους κώδικα αφαιρώντας κενά διαστήματα και σχόλια. Βελτιστοποιήστε αρχεία JS άμεσα χωρίς εγκατάσταση.

Ελαχιστοποιητής JavaScript

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

Αυτός ο απλός ελαχιστοποιητής JavaScript αφαιρεί περιττά κενά και σχόλια για να μειώσει το μέγεθος του κώδικά σας. Διατηρεί τη λειτουργικότητα ενώ κάνει τον κώδικα πιο συμπαγή.

  • Αφαιρεί περιττά κενά (κενά, στηλοθέτες, αλλαγές γραμμής)
  • Αφαιρεί σχόλια (μονής και πολλαπλών γραμμών)
  • Διατηρεί κυριολεκτικά συμβολοσειρών και κανονικές εκφράσεις
  • Διατηρεί τη λειτουργικότητα του κώδικα
Υπολογιστής φόρτωσης...
📚

Τεκμηρίωση

Τι είναι ένας ελαχιστοποιητής JavaScript;

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

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

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

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

  • Σχόλια, τόσο τα σχόλια // single-line μίας γραμμής όσο και τα σχόλια /* multi-line */ πολλών γραμμών, συμπεριλαμβανομένων των σχολίων τύπου JSDoc.
  • Επιπλέον κενά, στηλοθέτες και κενές γραμμές που υπάρχουν μόνο για να γίνεται ο κώδικας ευκολότερος στην ανάγνωση.

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

  • Το κείμενο μέσα σε συμβολοσειρές ("like this", 'like this') και σε πρότυπα συμβολοσειρών (`like this`), ακόμη και αν αυτό το κείμενο περιέχει κενά ή μοιάζει με σχόλιο.
  • Τα κυριολεκτικά κανονικών εκφράσεων, όπως το /[a-z]+/g, μαζί με όλες τις σημαίες τους: d, g, i, m, s, u, v και y.
  • Κάθε ερωτηματικό, κόμμα και αγκύλη που υπήρχε ήδη στον αρχικό κώδικα.

Μερικές φορές δεν μπορεί να αφαιρεθεί ένα κενό ανάμεσα σε δύο διακριτικά χωρίς να αλλάξει η σημασία τους. Το return a δεν μπορεί να γίνει returna, επειδή τότε θα διαβαζόταν ως μία μόνο λέξη. Το ίδιο ισχύει για ονόματα που γράφονται με γράμματα εκτός του αγγλικού αλφαβήτου, επομένως το typeof π διατηρεί το κενό του. Όταν η αφαίρεση ενός κενού θα ένωνε δύο διακριτικά, το εργαλείο διατηρεί ένα μόνο κενό.

Και μια αλλαγή γραμμής μπορεί να έχει σημασία. Η JavaScript εισάγει μερικές φορές αυτόματα ένα ερωτηματικό στο τέλος μιας γραμμής, σύμφωνα με έναν κανόνα που ονομάζεται Αυτόματη Εισαγωγή Ερωτηματικού. Αν η διαγραφή μιας αλλαγής γραμμής μπορούσε να ενεργοποιήσει ή να εμποδίσει αυτόν τον κανόνα ή αν η αλλαγή γραμμής ακολουθεί ένα άγκιστρο κλεισίματος }, το εργαλείο διατηρεί εκεί μία αλλαγή γραμμής. Γι’ αυτό ο ελαχιστοποιημένος κώδικας δεν συμπιέζεται πάντα σε μία γραμμή: ορισμένες αλλαγές γραμμής αλλάζουν τη σημασία του κώδικα και πρέπει να παραμείνουν.

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

  1. Επικολλήστε κώδικα JavaScript στο πλαίσιο εισαγωγής.
  2. Επιλέξτε «Minify».
  3. Διαβάστε το αποτέλεσμα στο πλαίσιο εξόδου, μαζί με το αρχικό μέγεθος, το ελαχιστοποιημένο μέγεθος και το ποσοστό μείωσης.
  4. Επιλέξτε «Copy» για να αντιγράψετε τον ελαχιστοποιημένο κώδικα.

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

Παράδειγμα: ελαχιστοποίηση μιας συνάρτησης

Πριν:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Μετά:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Και τα τρία σχόλια εξαφανίζονται και η εσοχή αφαιρείται. Το ελληνικό ερωτηματικό μετά το a+b παραμένει, επειδή το εργαλείο δεν διαγράφει ποτέ ένα ελληνικό ερωτηματικό που υπήρχε ήδη. Η αλλαγή γραμμής πριν από το const παραμένει επίσης, επειδή ακολουθεί μια άγκιστρο κλεισίματος }.

Παράδειγμα: ελαχιστοποίηση μιας κλάσης

Πριν:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Μετά:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

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

Τύπος μείωσης μεγέθους

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

1reduction = round((1 - minified characters / original characters) x 100)
2

Το παράδειγμα της συνάρτησης παραπάνω έχει 213 χαρακτήρες πριν από την ελαχιστοποίηση και 103 μετά. Επομένως 1–103 / 213 = 0,5164, δηλαδή 51,64%, και το εργαλείο εμφανίζει 52%. Το παράδειγμα της κλάσης μειώνεται από 515 χαρακτήρες σε 304, δηλαδή 40,97%, το οποίο εμφανίζεται ως 41%.

Περιορισμοί αυτού του ελαχιστοποιητή

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

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

Τι αφαιρεί ένας ελαχιστοποιητής JavaScript;

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

Αλλάζει η ελαχιστοποίηση JavaScript τον τρόπο εκτέλεσής της;

Όχι. Ο ελαχιστοποιημένος κώδικας θα πρέπει να παράγει τα ίδια αποτελέσματα με τον αρχικό. Αλλάζει μόνο η μορφοποίηση.

Γιατί ο ελαχιστοποιημένος κώδικας έχει μερικές φορές ακόμη αλλαγές γραμμής;

Μια αλλαγή γραμμής μπορεί να απαιτείται από τον κανόνα Αυτόματης Εισαγωγής Ερωτηματικού της JavaScript ή μπορεί να ακολουθεί ένα άγκιστρο κλεισίματος }. Η αφαίρεσή της θα μπορούσε να αλλάξει τη λειτουργία του κώδικα, επομένως το εργαλείο διατηρεί σε αυτά τα σημεία μία μόνο αλλαγή γραμμής αντί να τη διαγράφει.

Είναι η ελαχιστοποίηση το ίδιο με τη συμπίεση;

Όχι. Η ελαχιστοποίηση αφαιρεί χαρακτήρες από τον ίδιο τον πηγαίο κώδικα. Η συμπίεση, όπως με gzip ή Brotli, κωδικοποιεί το αρχείο με διαφορετικό τρόπο για τη μεταφορά του μέσω δικτύου. Οι ιστότοποι συνήθως χρησιμοποιούν και τα δύο μαζί.

Αποστέλλεται ο κώδικάς μου σε διακομιστή;

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

Μπορεί ο ελαχιστοποιημένος κώδικας να επανέλθει στην αρχική του μορφή;

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

Παραπομπές

  1. MDN Web Docs. "Minification." Γλωσσάρι MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," ενότητα 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," ενότητα 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," ενότητα 22.2.6, "Properties of the RegExp Prototype Object" (το σύνολο σημαιών d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object