O tym narzędziu
Minifikacja JavaScript zmniejsza rozmiar kodu źródłowego poprzez usunięcie niepotrzebnych znaków i (przy użyciu odpowiednich minifikatorów) zmianę nazw zmiennych lokalnych na krótsze. Pierwsza kategoria — usuwanie białych znaków i komentarzy — jest prosta i pozbawiona ryzyka. Drugie — zmiana nazwy zmiennych — wymaga zrozumienia zasad zakresu i jest tym, co najlepiej radzą sobie z minifikatorami produkcji, takimi jak Terser i esbuild.
To narzędzie koncentruje się na bezpiecznej minimalizacji: usuwaniu komentarzy, zwijaniu białych znaków, usuwaniu zbędnych średników i skracaniu oczywistych wzorców. Zmiana nazw zmiennych jest konserwatywna — zmieniane są tylko zmienne lokalne w wyraźnych zakresach, a nazwy, do których istnieją odniesienia zewnętrzne, pozostają niezmienione. Wynik jest funkcjonalnie identyczny ze źródłem.
W przypadku minimalizacji na poziomie produkcyjnym dedykowane narzędzia (Terser, esbuild, swc) rozumieją pełny model zakresu ECMAScript i dają znacznie mniejsze wyniki. To narzędzie służy do szybkiej minifikacji po stronie przeglądarki, gdy nie jest dostępna pełna konfiguracja kompilacji.
Dlaczego warto minimalizować JavaScript
Pakiety JavaScript są zazwyczaj największym pojedynczym zasobem na nowoczesnej stronie internetowej. Minifikacja rutynowo powoduje zmniejszenie rozmiaru o 30–60% w porównaniu ze źródłem niezminifikowanym. W połączeniu z gzip lub Brotli redukcja nieco się zmniejsza, ale kombinacja ta nadal pozwala zaoszczędzić mierzalne bajty — szczególnie dla użytkowników korzystających z wolnych połączeń.
Szybszy JavaScript oznacza także szybszy czas na interakcję. Mniejsze skrypty pobierają się szybciej, analizują szybciej i wykonują szybciej. W przypadku witryn, w których TTI wpływa na współczynnik odrzuceń i ranking SEO, minimalizacja jest jedną z najtańszych dostępnych korzyści.
Szczegóły techniczne
Miniyfikator tokenizuje JavaScript przy użyciu parsera zgodnego ze składnią ECMAScript. Komentarze (jedno- i wielowierszowe) są usuwane, z wyjątkiem komentarzy licencyjnych oznaczonych /*! prefiks. Białe znaki są zwijane, chyba że jest to wymagane składniowo (między identyfikatorami, po słowach kluczowych).
Konserwatywna zmiana nazw zmiennych skraca zmienne lokalne w prostych zakresach. Nazwy nazw globalnych, eksportów i importów nie są zmieniane — mogłoby to spowodować uszkodzenie odniesień zewnętrznych. Do głębokiej zmiany nazw użyj Tersera lub esbuilda z odpowiednią analizą uwzględniającą moduły.
Przypadki Edge: automatyczne wstawianie średnika (ASI) oznacza, że minifikator musi w niektórych kontekstach zachować znaki nowej linii, aby uniknąć zmiany zachowania programu. Literały szablonów, literały wyrażeń regularnych i JSX (jeśli dane wejściowe je zawierają) są zachowywane dokładnie dlatego, że ich zawartość może nie być bezpieczna do kompresji.
Często zadawane pytania
- Czy minifikacja zmienia sposób działania mojego kodu?
- Nie. Minifikacja usuwa spacje i komentarze, które nie mają wpływu na wykonanie. Skracanie zmiennych (zniekształcanie) zmienia nazwy zmiennych lokalnych, ale zachowuje zachowanie. Zmienne globalne i eksportowane nazwy pozostają nienaruszone.
- Czy powinienem minimalizować w fazie rozwoju lub produkcji?
- Używaj tylko zminimalizowanego kodu w środowisku produkcyjnym. Podczas programowania zachowaj oryginalny czytelny kod. Większość narzędzi do kompilacji (Webpack, Vite, esbuild) automatycznie obsługuje minifikację w ramach procesu kompilacji produkcyjnej.
- Jaka jest różnica między minifikacją a zaciemnianiem?
- Minifikacja zmniejsza rozmiar, zachowując funkcjonalną czytelność kodu po sformatowaniu. Zaciemnianie celowo utrudnia zrozumienie kodu (kodowanie ciągów znaków, spłaszczanie przepływu sterowania). To narzędzie koncentruje się na zmniejszaniu rozmiaru, a nie zaciemnianiu.
- Jakiego zmniejszenia rozmiaru powinienem się spodziewać?
- Zwykle 30-60% przed gzipem. Dobrze skomentowany kod z długimi nazwami zmiennych powoduje największe redukcje. W połączeniu z kompresją gzip pliki JavaScript są często o 80–90% mniejsze niż oryginalne źródło.
- Czy mój kod został przesłany na serwer?
- Nie. Minifier działa w Twojej przeglądarce.
- O ile mniejszy będzie mój JavaScript?
- Zwykle 30–60% redukcji. Kod zawierający wiele zmiennych i długie identyfikatory kompresuje więcej; Kod z dużą ilością wyrażeń kompresuje mniej.
- Czy powinienem minimalizować ręcznie?
- Nigdy. Zachowaj czytelny JavaScript w źródle. Uruchom minifikację jako krok kompilacji lub jako część wdrożenia.
- Czy to działa na TypeScript?
- TypeScript należy najpierw skompilować do JavaScript za pomocą tsc lub esbuild. Po skompilowaniu powstały kod JavaScript można zminimalizować.