JavaScript Minifier — Minifikator JavaScript

Jak działa minifikacja JavaScript

Minifikacja zmniejsza kod JavaScript, nie zmieniając jego działania. To narzędzie korzysta z Terser – dojrzałego minifikatora, który parsuje kod do abstrakcyjnego drzewa składniowego, przekształca je i ponownie zapisuje kod bez zbędnych białych znaków i komentarzy. Etap compress stosuje dziesiątki optymalizacji: usuwa nieosiągalny kod i nieużywane zmienne, wstawia stałe bezpośrednio w kod, łączy kolejne deklaracje zmiennych, tam gdzie to możliwe zamienia instrukcje if na krótsze wyrażenia warunkowe i z góry oblicza proste wyrażenia stałe. Następnie etap mangle zmienia nazwy zmiennych lokalnych, parametrów i funkcji na jedną lub dwie litery. Nazwy właściwości i zmienne globalne pozostają nietknięte, więc publiczne zachowanie kodu się nie zmienia.

Wskaźniki rozmiaru pokazują liczbę bajtów UTF-8 danych wejściowych i wyjściowych oraz procent oszczędności. Typowy kod pisany ręcznie zmniejsza się o 40–70%; kod, który jest już zwarty lub składa się głównie z długich ciągów znaków, zmniejszy się mniej. Pamiętaj, że serwery zwykle dodatkowo kompresują JavaScript za pomocą gzip lub Brotli, więc rzeczywista oszczędność transferu jest mniejsza niż surowa wartość, ale zminifikowany kod i tak parsuje się szybciej i zużywa mniej przepustowości.

Wybór właściwych opcji

Opcja ECMAScript target określa, jakiej składni Terser może używać w wyniku. Przy ES2020 może generować funkcje strzałkowe, optional chaining i inne nowoczesne konstrukcje; przy ES5 unika wprowadzania nowszej składni, ale nie transpiluje nowoczesnego kodu, który sam napisałeś – do tego użyj narzędzia takiego jak Babel lub esbuild. Keep console.* zachowuje logowanie, co przydaje się w buildach testowych (staging). Włącz ES module dla plików używających import/export; pozwala to też skracać nazwy najwyższego poziomu, ponieważ zakres modułu jest prywatny.

Prywatność w standardzie

Minifikator jest ładowany na żądanie i działa lokalnie, więc Twój kod źródłowy nigdy nie jest nigdzie wysyłany. Dzięki temu nadaje się do szybkich, jednorazowych zadań, takich jak zmniejszenie skryptu inline, bookmarkletu czy fragmentu kodu dla zewnętrznego menedżera tagów. Jeśli Terser zgłosi błąd składni, komunikat zawiera numer wiersza i kolumny, dzięki czemu łatwo poprawisz dane wejściowe. W przypadku paczek produkcyjnych pozostaw minifikację w procesie budowania, aby była powtarzalna, i generuj source mapy do debugowania.