Πώς λειτουργεί η μινιμαλοποίηση JavaScript
Το Terser λειτουργεί σε τέσσερα στάδια στο AST του κώδικά σας.
- Ανάλυση. Το Terser αναλύει το JavaScript σε AST. Τα συντακτικά σφάλματα εμφανίζονται εδώ.
- Συμπίεση. Ο συμπιεστής εφαρμόζει μετασχηματισμούς: σταθερή αναδίπλωση, αφαίρεση νεκρού κλάδου, inlining.
- Mangle. Το mangler μετονομάζει τοπικές δεσμεύσεις στα συντομότερα μοναδικά αναγνωριστικά.
- Απόδοση. Το Terser εκτυπώνει το μετασχηματισμένο AST σε συμβολοσειρά με ελάχιστα κενά.
Γιατί να μινιμαλοποιήσετε JavaScript
- Ταχύτερη φόρτωση σελίδων. Μικρότερα scripts αναλύονται και εκτελούνται γρηγορότερα.
- Χαμηλότεροι λογαριασμοί CDN. Λιγότερα bytes προς μεταφορά = χαμηλότερο κόστος.
- Δεν επιβαρύνει τη σελίδα σας. Το Terser φορτώνεται μόνο όταν κάνετε κλικ στο Μινιμαλοποίηση.
- Core Web Vitals. Το Lighthouse επισημαίνει το μεγάλο JavaScript ως κακό για το Total Blocking Time.
Συνήθεις εφαρμογές
Η μινιμαλοποίηση JavaScript εμφανίζεται σε κάθε στάδιο ενός web project.
- Pre-commit hooks.
- Έλεγχοι τρίτων widgets.
- Καθαρισμός παλαιών scripts.
Παράδειγμα
Μια συνάρτηση 130 byte μινιμαλοποιείται σε περίπου 55 byte — μείωση 58%.
FAQ
Αυτό τρέχει στο πρόγραμμα περιήγησής μου;
Ναι. Το Terser φορτώνεται lazy και ο κώδικάς σας δεν φεύγει από τη σελίδα.
Τι είναι το mangling και είναι ασφαλές;
Το mangling μετονομάζει τοπικές μεταβλητές. Είναι ασφαλές για αυτόνομα scripts.
Γιατί έσπασε ο κώδικάς μου μετά τη μινιμαλοποίηση;
Συνήθεις αιτίες: eval, with, Function.name ή globals που μετονομάστηκαν.
Υποστηρίζει σύγχρονη σύνταξη (ES2020+);
Ναι. Ορίστε τον στόχο σε ES2020 ή Next.
Μινιμαλοποιήστε JavaScript με Terser χωρίς build tool.