CodeKitHubΤι είναι αυτό το εργαλείο;
Ένας συμπιεστής HTML αφαιρεί ό,τι δεν χρειάζεται ένας browser για να αποδώσει σωστά μια σελίδα: σχόλια, επιπλέον κενά μεταξύ ετικετών, περιττά χαρακτηριστικά όπως type="text/javascript", και προαιρετικές παύλες κλεισίματος. Το αποτέλεσμα είναι λειτουργικά πανομοιότυπο HTML που κατεβαίνει και αναλύεται πιο γρήγορα.
Αυτό το εργαλείο βασίζεται στο html-minifier-terser, τον ίδιο συμπιεστή που χρησιμοποιείται σε δημοφιλή εργαλεία build, οπότε κατανοεί τη δομή HTML αντί να αφαιρεί τυφλά κενά — δεν θα αγγίξει περιεχόμενο ευαίσθητο στη μορφοποίηση μέσα σε <pre>, <textarea>, ή ενσωματωμένα μπλοκ <script>/<style>, και επίσης συμπιέζει το CSS και JS που είναι ενσωματωμένο στον κώδικά σας.
Γιατί να το χρησιμοποιήσετε;
- Πραγματικός αναλυτής από κάτω, όχι regex — ασφαλές σε ακραίες περιπτώσεις όπως μπλοκ <pre>, ενσωματωμένα scripts, και υπό όρους σχόλια.
- Συμπιέζει και το ενσωματωμένο περιεχόμενο <style> και <script>, όχι μόνο τον γύρω κώδικα.
- Δείτε ακριβώς πόσα bytes εξοικονομήσατε πριν στείλετε το αρχείο.
- Η λειτουργία μορφοποίησης μετατρέπει συμπιεσμένο HTML μίας γραμμής ξανά σε κάτι που ένας άνθρωπος μπορεί να διαβάσει και να επεξεργαστεί.
- 100% τοπική επεξεργασία — ο κώδικάς σας, και οτιδήποτε ιδιωτικό μέσα του, δεν φεύγει ποτέ από τον browser σας.
Πώς χρησιμοποιείται
- Επικολλήστε το HTML σας στο πεδίο εισαγωγής, ή κάντε κλικ στο "Φόρτωση παραδείγματος" για να δοκιμάσετε ένα δείγμα.
- Κάντε κλικ στο "Συμπίεση" για να το συμπιέσετε, ή στο "Μορφοποίηση" για να το μορφοποιήσετε με εσοχές 2 κενών.
- Ελέγξτε το μήνυμα κάτω από τα πλαίσια — η λειτουργία συμπίεσης δείχνει τη μείωση μεγέθους· αν το HTML δεν μπορεί να αναλυθεί, θα δείτε το ακριβές σφάλμα αντί για κατεστραμμένη έξοδο.
- Κάντε κλικ στο "Αντιγραφή" για να λάβετε το αποτέλεσμα.
Παράδειγμα
Είσοδος
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- greeting -->
<p class="greeting">
Hello, world!
</p>
</body>
</html>Έξοδος
<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>Τα σχόλια, οι εσοχές και οι αλλαγές γραμμής αφαιρούνται· το doctype συντομεύεται. Η ορατή σελίδα αποδίδεται πανομοιότυπα.
Πρακτικές συμβουλές
- Συμπιέστε ακριβώς πριν την ανάπτυξη, όχι κατά τη διάρκεια της ανάπτυξης — κρατήστε ευανάγνωστο HTML στο σύστημα ελέγχου εκδόσεων και συμπιέστε μόνο το τελικό αποτέλεσμα της κατασκευής.
- Αν μια σελίδα συμπεριφέρεται περίεργα μετά τη συμπίεση, ελέγξτε για JavaScript που βασίζεται σε ακριβή κενά μέσα σε text nodes (σπάνιο, αλλά συμβαίνει με ορισμένα παλαιότερα widgets).
- Η μορφοποίηση συμπιεσμένου HTML από έναν ζωντανό ιστότοπο είναι γρήγορος τρόπος να επιθεωρήσετε τη δομή του πριν γράψετε έναν scraper ή αποσφαλματώσετε ζητήματα διάταξης.
- Συνδυάστε με τους συμπιεστές CSS και JS παρακάτω αν η διαδικασία κατασκευής σας κρατά στυλ και scripts σε ξεχωριστά αρχεία.
Πού ταιριάζει σε πραγματικές ροές εργασίας
Στατικοί ιστότοποι, templates email και σελίδες προορισμού χτισμένες με το χέρι συχνά κυκλοφορούν με τις ίδιες εσοχές και σχόλια που χρησιμοποιήθηκαν κατά την ανάπτυξη. Η συμπίεση πριν την κυκλοφορία περικόπτει ένα πραγματικό, αν και μέτριο, ποσό βάρους μεταφοράς — και ειδικά για HTML email, ο αριθμός χαρακτήρων μερικές φορές επηρεάζει το όριο περικοπής του Gmail, οπότε ο μικρότερος κώδικας έχει λειτουργικό όφελος πέρα από την ταχύτητα.
Η κατεύθυνση μορφοποίησης είναι εξίσου χρήσιμη αντίστροφα: η επικόλληση μιας συμπιεσμένης σελίδας από το view-source και η αναδιαμόρφωσή της είναι συχνά ο ταχύτερος τρόπος να κατανοήσετε τη δομή της σελίδας προορισμού ενός ανταγωνιστή ή να αποσφαλματώσετε μια ενσωμάτωση τρίτου.
Συνήθεις περιπτώσεις χρήσης
- Αφαίρεση bytes από μια στατική σελίδα προορισμού ή template email πριν τεθεί σε λειτουργία.
- Αναδιαμόρφωση ενός συμπιεσμένου αποσπάσματος HTML που προήλθε από view-source για να κατανοήσετε τη δομή του.
- Καθαρισμός HTML που επικολλήθηκε από επεξεργαστή WYSIWYG ή εξαγωγή CMS, που συχνά φέρει περιττά κενά.
- Γρήγορος έλεγχος αν ένα χειρόγραφο απόσπασμα HTML είναι καλά διαμορφωμένο, αφού μια αποτυχία ανάλυσης εμφανίζεται ως σαφές σφάλμα.
Συχνές ερωτήσεις
Ανεβαίνει το HTML μου κάπου;
Όχι. Η συμπίεση και η μορφοποίηση γίνονται και οι δύο τοπικά στον browser σας με JavaScript. Τίποτα από όσα επικολλάτε δεν αποστέλλεται σε server, οπότε είναι ασφαλές να το χρησιμοποιήσετε με εσωτερικά templates ή αδημοσίευτες σελίδες.
Θα χαλάσει η συμπίεση τη σελίδα μου;
Δεν θα έπρεπε — το εργαλείο χρησιμοποιεί πραγματικό αναλυτή HTML (html-minifier-terser) που κατανοεί τη δομή ετικετών, οπότε διατηρεί στοιχεία ευαίσθητα στα κενά όπως <pre> και <textarea> και δεν θα συγχωνεύσει λανθασμένα χαρακτηριστικά. Ελέγξτε πάντα δειγματοληπτικά κρίσιμες σελίδες μετά τη συμπίεση, ειδικά αν βασίζεστε σε ασυνήθιστα ενσωματωμένα scripts.
Συμπιέζει επίσης CSS και JavaScript μέσα στο HTML;
Ναι. Τα ενσωματωμένα μπλοκ <style> και <script> συμπιέζονται επί τόπου χρησιμοποιώντας τις ίδιες μηχανές με τα ειδικά εργαλεία συμπίεσης CSS και JS, οπότε δεν χρειάζεται να τα εξάγετε χειροκίνητα.
Πόσο μικρότερο γίνεται συνήθως το HTML;
Εξαρτάται από το πόσα κενά, σχόλια και μορφοποίηση είχε το αρχικό — χειρόγραφο HTML με πολλές εσοχές και σχόλια συνήθως συρρικνώνεται 20-40%. Το HTML που παράγεται από frameworks και είναι ήδη συμπαγές θα εξοικονομήσει λιγότερο.
Μπορώ να μετατρέψω συμπιεσμένο HTML ξανά σε ευανάγνωστη μορφή;
Ναι — επικολλήστε το συμπιεσμένο HTML και κάντε κλικ στο "Μορφοποίηση" αντί για "Συμπίεση" για να λάβετε πίσω σωστά μορφοποιημένο, ευανάγνωστο κώδικα.