Narzędzie do minimalizacji i formatowania kodu JavaScript

Czym jest to narzędzie?

Narzędzie do minifikacji kodu JavaScript przepisuje kod tak, aby był jak najmniejszy, zachowując przy tym identyczne działanie: skraca nazwy zmiennych i funkcji tam, gdzie jest to bezpieczne, usuwa komentarze i spacje, zagniata stałe oraz eliminuje kod, do którego nie ma dostępu.

Narzędzie to opiera się na Terserze – minifikatorze opartym na AST, z którego korzystają webpack, Vite, Rollup oraz większość nowoczesnych narzędzi do kompilacji kodu JavaScript. Ponieważ faktycznie analizuje kod, a nie tylko dopasowuje wzorce tekstowe, poprawnie odróżnia operator dzielenia od literału wyrażenia regularnego, nie psuje ciągów szablonowych zawierających sekwencje przypominające // oraz nie zmienia nazwy zmiennej na taką, która koliduje z nazwą w zakresie zewnętrznym.

Dlaczego warto go używać?

• Minifikacja oparta na AST (Terser) — ten sam silnik, z którego korzystają najpopularniejsze narzędzia do pakowania kodu — bezpieczna w przypadku literałów wyrażeń regularnych, ciągów szablonowych i zamknięć.
• Zmienia nazwy zmiennych, aby uzyskać rzeczywistą oszczędność miejsca, a nie tylko usunąć spacje.
• Sprawdź dokładnie, ile bajtów i jaki procent udało Ci się zaoszczędzić.
• Tryb formatowania przekształca zaszyfrowany, zminifikowany, jednowierszowy kod JS z powrotem w czytelny kod z wcięciami — przydatny do zrozumienia skryptów stron trzecich.
• W 100% lokalne przetwarzanie — nasz własny kod nigdy nie opuszcza Twojej przeglądarki.

Jak używać

1. Wklej kod JavaScript do pola wprowadzania danych lub kliknij „Załaduj przykład”, aby wypróbować przykład z literałem wyrażenia regularnego i ciągiem szablonowym.
2. Kliknij „Minifikuj”, aby skompresować kod, lub „Formatuj”, aby sformatować go z wcięciem o szerokości dwóch spacji.
3. Sprawdź komunikat wyświetlany pod polami — tryb minifikacji pokazuje stopień zmniejszenia rozmiaru; błąd składniowy w kodzie powoduje wyświetlenie jasnego komunikatu zamiast cichego generowania nieprawidłowego wyniku.
4. Kliknij „Kopiuj”, aby skopiować wynik.

Przykład

Wejście

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Wynik

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Nazwy zmiennych są skracane, komentarz i instrukcja if są scalane w jedno wyrażenie, ale literał wyrażenia regularnego i ciąg szablonowy są zachowywane w niezmienionej postaci, a zachowanie pozostaje takie samo.

Praktyczne wskazówki

• Minifikuj kod podczas kompilacji, a nie poprzez ręczną edycję — zachowaj czytelny kod źródłowy pod kontrolą wersji i wygeneruj zminifikowany pakiet jako etap kompilacji.
• Jeśli zminifikowany kod zachowuje się w nieoczekiwany sposób, sprawdź, czy nie zawiera on fragmentów opartych na `Function.prototype.name` lub refleksji — proces manglingu zmienia nazwy funkcji, co może dać o sobie znać w rzadkich, skrajnych przypadkach.
• Sformatowanie skryptu zewnętrznego przed jego odczytaniem przebiega znacznie szybciej niż próba analizy pojedynczego wiersza zawierającego 2 000 znaków.
• Jeśli przygotowujesz pełny pakiet statyczny do wdrożenia, połącz go z poniższymi narzędziami do minifikacji kodu HTML i CSS.

Jak to się wpisuje w rzeczywiste procesy robocze

JavaScript jest zazwyczaj największym elementem na stronie, który blokuje renderowanie lub parsowanie, więc jego minifikacja ma realny, mierzalny wpływ na czas ładowania — większy niż w przypadku HTML czy CSS, biorąc pod uwagę każdą pojedynczą bajt. Większość nowoczesnych frameworków robi to automatycznie podczas kompilacji, ale skrypty pisane ręcznie, rozszerzenia przeglądarek i skrypty w zakładkach często są dostarczane w postaci niezminifikowanej, chyba że ktoś przetworzy je za pomocą narzędzia takiego jak to.

Funkcja Format jest zazwyczaj używana w odwrotny sposób: debugowanie błędu produkcyjnego na podstawie zminifikowanego śladu stosu jest znacznie łatwiejsze, gdy otaczający go kod zostanie sformatowany i stanie się czytelny, nawet bez oryginalnych nazw zmiennych.

→ Minifikator HTML · Minifikator CSS

Typowe zastosowania

• Kompresja samodzielnego skryptu lub bookmarkletu przed opublikowaniem.
• Przekształcenie skompresowanego skryptu pobranego z działającej witryny w celu zrozumienia jego działania.
• Oczyszczenie kodu JavaScript wklejonego z wpisu na forum lub fragmentu wygenerowanego przez sztuczną inteligencję przed jego dokładnym przeczytaniem.
• Szybkie sprawdzenie, czy ręcznie napisany fragment kodu JS zawiera błąd składniowy, ponieważ błąd analizy składniowej jest sygnalizowany wyraźnym komunikatem.

Najczęściej zadawane pytania