Minifikuj JavaScript _

Jak działa minifikacja JavaScript?

Terser działa w czterech etapach na abstrakcyjnym drzewie składniowym Twojego kodu. Każdy etap jest niezależny, więc możesz włączyć lub wyłączyć dowolny z nich bez uszkadzania pozostałych.

1. Parsowanie. Terser parsuje JavaScript do AST. Każdy błąd składniowy jest tu widoczny z tokenem i linią, która go spowodowała, więc znajdziesz prawdziwy problem przed uruchomieniem jakiegokolwiek przekształcenia. Parser akceptuje każdą standardową konstrukcję ECMAScript aż do najnowszych propozycji na etapie 4.
2. Kompresja. Kompresor przechodzi przez AST i stosuje dziesiątki przekształceń zachowujących semantykę: stałe składanie, eliminację martwych gałęzi, inlinowanie krótkich czystych funkcji, zwijanie kolejnych deklaracji var i przepisywanie równoważnych form instrukcji (if/else na ternary, skracanie łańcuchów porównań, zwijanie warunkowych powrotów). Każde przekształcenie jest w zasadzie odwracalne; kompresor nigdy nie zmienia obserwowalnego zachowania.
3. Mangling. Mangler zmienia nazwy lokalnych powiązań na najkrótsze unikalne identyfikatory (a, b, c, …) w obrębie każdego zakresu. Zmieniane są tylko nazwy, które nie mogą wyjść poza granicę modułu — eksportowane powiązania, klucze właściwości i referencje globalne pozostają nienaruszone. Wynik to największa pojedyncza oszczędność bajtów spośród wszystkich etapów.
4. Renderowanie. Terser drukuje przekształcone AST z powrotem do łańcucha JavaScript ze zwiniętymi białymi znakami i separatorami instrukcji zredukowanymi do minimum akceptowanego przez gramatykę. Komentarze są usuwane, chyba że przełącznik zachowania licencji zachowuje bloki /*! … */, których zachowania wymagają licencje większości CDN.

Dlaczego minifikować JavaScript?

• Szybsze ładowanie stron. Mniejsze skrypty są parsowane i wykonywane szybciej. Na połączeniu mobilnym 4G redukcja bajtów o 40 procent skraca Time to Interactive o realne sekundy — to metryka, którą Google PageSpeed Insights mierzy najagresywniej.
• Niższe rachunki za egress CDN. CloudFront, Cloudflare i Fastly naliczają opłaty za gigabajt egress. Redukcja skryptów o 40 procent na milionach miesięcznych odsłon kumuluje się w realne oszczędności, zanim jeszcze wylądują optymalizacje obrazów lub CSS. Matematyka trzyma się nawet po gzip i brotli — minifikacja usuwa tokeny, które w przeciwnym razie kompresor musiałby zakodować.
• Ten minifikator nie obciąża Twojej strony. Terser waży ~1 MB nieskompresowany. Większość online'owych minifikatorów wysyła całą bibliotekę przy ładowaniu strony, co pogarsza ich własny wynik Lighthouse i sprawia, że strona jest powolna zanim użytkownik cokolwiek wpisze. Ta strona ładuje Tersera leniwie dopiero gdy klikniesz Minifikuj lub włączysz tryb na żywo — dzięki czemu początkowe renderowanie mieści się poniżej progów Core Web Vitals, które narzędzie samo obiecuje pomóc osiągnąć.
• Zdanie Core Web Vitals. Lighthouse i PageSpeed Insights flagują duży JavaScript jako bezpośredni wkład w słaby Total Blocking Time. Minifikowanie bibliotek dostawców i bundli aplikacji to najszybsza korzyść w audytach Lighthouse "Reduce unused JavaScript" i "Remove duplicate modules" — zazwyczaj jednorazowa redukcja warta dziesięć lub dwadzieścia punktów.

Typowe zastosowania

Minifikacja JavaScript pojawia się na niemal każdym etapie nowoczesnego projektu webowego.

• Hooki pre-commit: minifikuj poszczególne skrypty narzędziowe przed commitem do repozytorium, by zacommitowany artefakt był gotowy do produkcji, a diff pokazywał zmiany logiki zamiast szumu białych znaków.
• Audyty widgetów firm trzecich: wklej snippet embed dostawcy i sprawdź, czy jest już zminifikowany lub czy można go jeszcze zmniejszyć przed serwowaniem milionom użytkowników.
• Sprzątanie starszych skryptów: kompresuj stare wtyczki jQuery i ręcznie pisane skrypty sprzed obecnego pipeline budowania bez dotykania drzewa źródłowego.

Przykład krok po kroku

Weź małą funkcję: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — około 130 bajtów łącznie z komentarzem. Wklej powyżej z włączonymi Mangle i Compress. Wynik skraca się do mniej więcej function add(n,o){return n+o}console.log(add(1,2)); — około 55 bajtów, redukcja o 58 procent. Nazwa funkcji add przeżywa, bo jest w referencji w wywołaniu console.log; nazwy parametrów firstNumber i secondNumber skracają się do jednej litery, bo są lokalne dla ciała funkcji. Wyłącz Mangle, by zachować czytelne nazwy parametrów przy jednoczesnym zwijaniu białych znaków i usuwaniu komentarza.

FAQ

Czy to działa w mojej przeglądarce?

Tak. Terser jest ładowany leniwie za pierwszym razem, gdy klikniesz Minifikuj lub włączysz tryb na żywo — około 200 KB skompresowanych trafia do pamięci cache przeglądarki, a następnie nic więcej nie jest pobierane. Twój kod nigdy nie opuszcza strony.

Czym jest mangling nazw i czy jest bezpieczny?

Mangling zmienia nazwy zmiennych lokalnych na pojedyncze litery, by zaoszczędzić bajty. Jest bezpieczny dla samodzielnych skryptów i bundli IIFE, ponieważ zmiany nazw nigdy nie wychodzą poza zakres. NIE jest bezpieczny dla skryptów, które eksponują globale po nazwie (np. window.myLib = …) bez owijacza. Wyłącz Mangle, gdy nie jesteś pewien.

Dlaczego mój kod przestał działać po minifikacji?

Trzech zwykłych podejrzanych: eval lub with odwołujące się do zmiennych po łańcuchu; odczyt Function.name lub arguments.callee zależny od oryginalnego identyfikatora; lub globale eksponowane przez nazwę, która została zmieniona. Najpierw wyłącz Mangle, by ustalić, czy zmiana nazw lub przekształcenie Compress jest przyczyną.

Czy obsługuje nowoczesną składnię (ES2020+)?

Tak. Ustaw cel ECMAScript na ES2020 lub Next, a Terser zachowa opcjonalne łańcuchowanie, nullish coalescing, await na najwyższym poziomie i operatory przypisania logicznego. Ustaw na ES5, a Terser down-kompiluje tam gdzie może, ale nie jest pełnym transpilatorem — użyj Babel dla składni, której ES5 w ogóle nie może reprezentować.

Przeglądarkowa minifikacja JavaScript z Terserem daje wyniki produkcyjnej jakości bez dodawania narzędzia budowania. Wklej skrypt, wybierz cel ECMAScript, skopiuj lub pobierz wynik. Nic nie jest wysyłane, bez konta, bez pipeline budowania. Sam minifikator ładuje się dopiero gdy go poprosisz — więc otwarcie tej strony kosztuje kilka kilobajtów, nie megabajt.