Minifikator JavaScript

Wklej JavaScript, aby zmniejszyć go za pomocą Terser: martwy kod jest usuwany, nazwy skracane, a białe znaki znikają. Błędy składni wskazują dokładną linię i kolumnę.

Działa w przeglądarceBez rejestracjiNic nie jest wysyłane

Zminifikowany wynik

Jak używać: Minifikator JavaScript

  1. Wklej swój JavaScript lub otwórz plik .js.
  2. Wybierz opcje: Skracaj nazwy skraca zmienne lokalne, Kompresuj przepisuje kod na mniejszy odpowiednik, Moduł ES włącza import/export na najwyższym poziomie.
  3. Wybierz docelową wersję ECMAScript obsługiwaną przez przeglądarki Twoich użytkowników. ES2020 jest bezpieczny dla wszystkich aktualizowanych przeglądarek.
  4. Sprawdź rozmiar, oszczędności i szacunek po gzip pod wynikiem.
  5. Skopiuj zminifikowany kod lub pobierz go jako output.min.js.

Co robi minifikator JavaScript?

Minifikacja zmniejsza JavaScript bez zmiany jego działania. To narzędzie używa Terser, minifikatora stojącego za webpackiem, Vite i Rollupem, i stosuje trzy rodzaje zmian:

  • Usuwanie białych znaków i komentarzy: wcięcia, znaki nowej linii i komentarze nie są potrzebne silnikowi JavaScript.
  • Mangling: nazwy zmiennych lokalnych i parametrów funkcji, np. subtotal, stają się pojedynczymi literami. Nazwy globalne i właściwości obiektów pozostają nietknięte, więc Twoje publiczne API nadal działa.
  • Kompresja: wyrażenia stałe są obliczane, nieosiągalny kod usuwany, instrukcje if zamieniane na operatory trójargumentowe, a krótkie funkcje wstawiane inline.

Minifikacja a gzip: czy potrzebujesz obu?

Tak. Gzip i Brotli kompresują powtarzające się wzorce bajtów podczas przesyłania, a minifikacja usuwa bajty, które przeglądarka musiałaby pobrać, sparsować i skompilować. Typowy skrypt zmniejsza się o 40–60% dzięki minifikacji, a potem o kolejne 60–70% dzięki gzip. Pokazany tu rozmiar po gzip dobrze szacuje, ile faktycznie wyśle Twój serwer.

Zachowywanie komentarzy licencyjnych

Wiele licencji open source (MIT, BSD, Apache) wymaga, aby informacja o prawach autorskich pozostała przy kodzie. Zgodnie z konwencją komentarze zaczynające się od /*! lub zawierające @license albo @preserve są zachowywane, gdy włączona jest opcja Zachowaj komentarze licencyjne.

Kiedy nie minifikować ręcznie

Jeśli projekt używa już bundlera, pozwól mu minifikować buildy produkcyjne i generować source mapy do debugowania. Minifikator online sprawdza się przy jednorazowych skryptach, fragmentach dla CMS-a lub menedżera tagów, bookmarkletach i sprawdzaniu, jak bardzo można zmniejszyć kawałek kodu.

Najczęściej zadawane pytania

Czy mój kod jest wysyłany na serwer?
Nie. Terser działa w karcie przeglądarki, więc zastrzeżony kod nigdy nie opuszcza Twojego komputera.
Czy minifikacja może zepsuć mój kod?
Terser stosuje tylko transformacje, które zachowują identyczne działanie poprawnego JavaScriptu. Kod opierający się na Function.prototype.toString() lub na nazwach zmiennych lokalnych przez eval może zostać zmieniony; w takim przypadku wyłącz Skracaj nazwy.
Czy obsługuje nowoczesną składnię, np. async/await, klasy i optional chaining?
Tak. Terser parsuje składnię ES2022+. Ustawienie celu kontroluje tylko, jakiej składni może używać wynik; nie transpiluje nowszych funkcji do starszych.
Czym różni się minify od uglify?
Oznaczają to samo. UglifyJS był klasycznym narzędziem; Terser to jego utrzymywany fork z pełną obsługą ES2015+.

Powiązane narzędzia

Minifikator CSS Zmniejsz arkusze stylów: skróć wartości i scal zduplikowane reguły. Minifikator HTML Usuń komentarze i białe znaki, zminifikuj osadzony CSS/JS. Formater JSON Formatuj, minifikuj i waliduj JSON z błędami linia/kolumna. Formater SQL Formatuj lub minifikuj SQL dla PostgreSQL, MySQL, T-SQL, BigQuery i innych.