Χωρίς μεταφόρτωση, 100% τοπικά, χωρίς λογαριασμό

Συμπίεση / Ομορφοποίηση κώδικα

Συμπιέστε ή ομορφοποιήστε κώδικα. Όλα παραμένουν στο πρόγραμμα περιήγησής σας.

Πώς λειτουργεί το Συμπίεση / Ομορφοποίηση κώδικα

Το Minify / Beautify συμπιέζει HTML, CSS και JavaScript αφαιρώντας σχόλια, περιττά κενά διαστήματα και πλεονάζοντες χαρακτήρες, ή επεκτείνει ελαχιστοποιημένο κώδικα πίσω σε μια αναγνώσιμη μορφή με εσοχές. Όλη η επεξεργασία γίνεται στο πρόγραμμα περιήγησης χρησιμοποιώντας πακεταρισμένους αναλυτές, τίποτα από όσα επικολλάτε δεν μεταδίδεται πουθενά. Τίποτα από όσα πληκτρολογείτε εδώ δεν φεύγει από τη συσκευή σας.

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

Συγγραφή από Bastien Sulyan

Συμπίεση / Ομορφοποίηση κώδικα: οδηγός βήμα προς βήμα

  1. Επικολλήστε τον κώδικά σας HTML, CSS ή JavaScript στην περιοχή εισόδου.
  2. Επιλέξτε τον τύπο γλώσσας από το αναπτυσσόμενο μενού (HTML, CSS ή JavaScript).
  3. Κάντε κλικ στο «Minify» για να παραγάγετε τη συμπιεσμένη έκδοση, ή στο «Beautify» για να επεκτείνετε και να βάλετε εσοχές στον κώδικα.
  4. Αντιγράψτε το αποτέλεσμα από την περιοχή εξόδου χρησιμοποιώντας το κουμπί αντιγραφής.
  5. Επικολλήστε διαφορετικό κώδικα και επαναλάβετε όπως χρειάζεται.

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

  • Ένας προγραμματιστής frontend θέλει να ελαχιστοποιήσει ένα κρίσιμο απόσπασμα CSS για να το ενσωματώσει στο head του HTML για απόδοση πάνω από το πτυσσόμενο μέρος.
  • Ένας προγραμματιστής λαμβάνει ένα ελαχιστοποιημένο σενάριο τρίτου μέρους και χρειάζεται να το beautify για να κατανοήσει τη λογική του κατά τη διάρκεια ενός ελέγχου ασφάλειας.
  • Ένας τεχνικός συγγραφέας χρειάζεται μια εξωραϊσμένη έκδοση μιας ελαχιστοποιημένης ετικέτας σεναρίου JSON-LD για να τη συμπεριλάβει σε τεκμηρίωση.
  • Ένας προγραμματιστής ιστού ελέγχει την εξοικονόμηση byte από την ελαχιστοποίηση ενός αρχείου CSS πριν αποφασίσει αν θα προσθέσει ένα βήμα παραγωγής.

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

Στέλνεται ο κώδικας που επικολλώ σε κάποιον διακομιστή για ελαχιστοποίηση;

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

Διατηρεί η ελαχιστοποίηση JavaScript την αρχική συμπεριφορά του κώδικα;

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

Μπορώ να ελαχιστοποιήσω και μετά να εξωραΐσω το αποτέλεσμα για να το επαληθεύσω;

Ναι. Ελαχιστοποίησε πρώτα τον κώδικα, μετά επικόλλησε την ελαχιστοποιημένη έξοδο πίσω στην είσοδο και κάνε κλικ στο Beautify. Η εξωραϊσμένη έκδοση θα φαίνεται διαφορετική από τον αρχικό πηγαίο κώδικα (τα ονόματα μεταβλητών μπορεί να είναι συντομευμένα, τα σχόλια αφαιρεμένα) αλλά θα είναι δομικά ισοδύναμη.

Αφαιρεί η ελαχιστοποίηση HTML όλα τα σχόλια;

Το εργαλείο αφαιρεί τα τυπικά σχόλια HTML (<!-- ... -->) κατά την ελαχιστοποίηση. Τα υπό όρους σχόλια που χρησιμοποιούνταν από παλιές εκδόσεις IE (<!--[if IE]...-->) διατηρούνται πάντα, οπότε η αφαίρεση σχολίων δεν μπορεί να σπάσει παλαιότερη συμπεριφορά που εξαρτάται από αυτά.

Υπάρχει όριο μεγέθους στον κώδικα που μπορώ να ελαχιστοποιήσω;

Το όριο είναι η διαθέσιμη μνήμη της καρτέλας του προγράμματος περιήγησής σας. Κώδικας έως μερικές εκατοντάδες kilobytes επεξεργάζεται γρήγορα. Για μεγάλα πακέτα JavaScript (megabytes), ένα ειδικό εργαλείο παραγωγής όπως το esbuild, το Terser ή το Lightning CSS είναι γρηγορότερο και πιο κατάλληλο για χρήση παραγωγής.

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

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία για προγραμματιστές