Minification
Το minification είναι η διαδικασία αφαίρεσης περιττών χαρακτήρων από τον πηγαίο κώδικα, όπως κενά, σχόλια και μεγάλα ονόματα μεταβλητών, χωρίς αλλαγή της λειτουργικότητας, μειώνοντας το μέγεθος αρχείου για ταχύτερη φόρτωση.
Όταν οι προγραμματιστές γράφουν κώδικα, χρησιμοποιούν κενά, στοίχιση, περιγραφικά ονόματα μεταβλητών και σχόλια για να τον κάνουν ευανάγνωστο. Οι browsers δεν χρειάζονται τίποτα από αυτά. Το minification αφαιρεί αυτά τα φιλικά προς τον άνθρωπο στοιχεία από αρχεία CSS, JavaScript και HTML, παράγοντας μικρότερα αρχεία που φορτώνουν και αναλύονται ταχύτερα. Για τη JavaScript, το minification πηγαίνει πέρα από την αφαίρεση κενών. Τα προηγμένα minifiers (όπως το Terser) συντομεύουν ονόματα μεταβλητών, αφαιρούν νεκρό κώδικα, απλοποιούν εκφράσεις και εφαρμόζουν διάφορες βελτιστοποιήσεις.
Ένα αρχείο JavaScript 500KB μπορεί να μειωθεί σε 150KB με minification, μείωση 70%. Το minification CSS αφαιρεί σχόλια, κενά και πλεονάζουσες δηλώσεις. Μπορεί επίσης να συνδυάσει συντομευμένες ιδιότητες, να συγχωνεύσει πανομοιότυπους επιλογείς και να αφαιρέσει αχρησιμοποίητα vendor prefixes. Το minification HTML αφαιρεί σχόλια, κενά μεταξύ ετικετών και προαιρετικές ετικέτες κλεισίματος. Το minification γίνεται συνήθως αυτόματα από εργαλεία build (webpack, Vite, Rollup) ως μέρος της διαδικασίας παραγωγής.
Στην πράξη
- Το JavaScript bundle μιας web εφαρμογής πήγε από 1,2MB σε 340KB μετά το minification και έπεσε στα 95KB μετά τη συμπίεση gzip, φορτώνοντας σε λιγότερο από 1 δευτερόλεπτο σε 3G
- Ένας ιστότοπος WordPress εγκατέστησε ένα plugin minification και βελτίωσε τη βαθμολογία PageSpeed Insights κατά 15 μονάδες μόνο από το minification CSS και JS
- Το CSS ενός SaaS dashboard ήταν 280KB χωρίς minification, μετά το minification και την αφαίρεση αχρησιμοποίητων στυλ, έπεσε στα 18KB, εξαλείφοντας τις καθυστερήσεις που μπλοκάρουν το rendering
- Ένας προγραμματιστής ανέπτυξε κατά λάθος μη minified κώδικα σε παραγωγή, διπλασιάζοντας τους χρόνους φόρτωσης σελίδας, το CI/CD pipeline ενημερώθηκε για να αποτραπεί κάτι τέτοιο στο μέλλον
Περισσότερα για: Απόδοση
Δεν είστε σίγουροι πώς εφαρμόζεται σε εσάς;
Ένας έμπειρος μηχανικός εξετάζει τον ιστότοπό σας, την παρουσία σας στις αναζητήσεις και τον τρόπο που σας φτάνουν τα αιτήματα, και μετά καταγράφει τα τρία πράγματα που αξίζει να διορθωθούν πρώτα. Κρατάτε το έγγραφο είτε έτσι είτε αλλιώς.