Softonic

Minifikator JavaScripta

Krok 1 / 3
Dalej

Wklej kod JavaScript, a otrzymasz zminifikowaną wersję o 40–70% mniejszą: usunięte białe znaki, zmienne skrócone do pojedynczych liter, wycięte martwe gałęzie, zwinięte stałe oraz (jeśli to włączysz) usunięte komentarze. Przydatne do szybkiego sprawdzania rozmiaru, jednorazowych osadzeń i stron docelowych, gdy nie uruchamiasz pełnego łańcucha narzędzi budowania.

Jak skrócić kod JavaScripta

  1. 1

    Wklej źródło

    Dowolny poprawny kod JavaScript w standardzie ES5+. W przypadku ES6 i nowszych (literały szablonów, klasy, moduły) upewnij się, że Twój cel jest zgodny.

  2. 2

    Wybierz poziom minifikacji

    Bezpieczny (białe znaki + komentarze), domyślny (+ manglowanie zmiennych), agresywny (+ manglowanie nazw właściwości, może zepsuć dostęp do DOM).

  3. 3

    Zredukuj do minimum

    Narzędzie wykona transformację kompatybilną z Terserem i wygeneruje wynik zawierający liczbę bajtów przed oraz po transformacji.

  4. 4

    Skopiuj lub pobierz

    Wklej wynik do tagu `<script>` lub zapisz go jako `.min.js`, aby móc go udostępniać przez swój CDN.

Dokąd trafiają bajty

Typowy zminifikowany plik jest o 40–70% mniejszy od źródła. Spakowanie go gzipem (lub Brotli, którego używają Cloudflare i większość CDN-ów) ucina kolejne 60–75%. Łącznie źródło o rozmiarze 100 KB może trafić do sieci jako ~15–25 KB.

Źródło Zminifikowany +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Zastosowane techniki

Technika Co robi
Usuwanie białych znaków Usuwa spacje, tabulatory i znaki nowej linii
Usuwanie komentarzy Usuwa // i /* */ (z wyjątkiem !important)
Manglowanie nazw zmiennych Zmienia nazwę userName -> u (bezpiecznie dla zakresu)
Manglowanie nazw właściwości Zmienia nazwę obj.foo -> obj.a (NIEBEZPIECZNE)
Zwijanie stałych 1 + 2 + 3 → 6
Usuwanie martwego kodu Usuwa gałęzie po return
Wstawianie wbudowane przepływu sterowania Wstawia w miejscu małe funkcje używane jednorazowo
Kompresja literałów łańcuchowych Łączy powtarzające się stałe łańcuchowe

Tryb bezpieczny kontra agresywny

  • Bezpieczny zachowuje nazwy zmiennych i usuwa tylko białe znaki. Dobry do debugowania, gdy chcesz mieć czytelne ślady stosu.
  • Domyślny mangluje zmienne lokalne, ale zachowuje nazwy globalne i nazwy właściwości. Działa z większością kodu.
  • Agresywny mangluje wszystko, łącznie z nazwami właściwości. Często psuje kod, który sięga po właściwości dynamicznie (obj["prop"], Object.keys(obj)), o ile nie skonfigurujesz nazw zarezerwowanych.

Kiedy minifikować, a kiedy nie

  • Minifikuj w środowisku produkcyjnym każdy zasób, który pobiera przeglądarka.
  • Udostępniaj mapę źródeł, aby narzędzia DevTools przeglądarki nadal pokazywały oryginalne nazwy podczas debugowania.
  • Nie minifikuj podczas pracy deweloperskiej, marnujesz czas budowania i tracisz czytelne błędy.
  • Nie minifikuj kodu już zminifikowanego. Pliki .min.js przy ponownej minifikacji kurczą się o ~1–3%, a ryzykujesz ich uszkodzenie.

Najczęstsze błędy

  • Brak konfiguracji nazw zarezerwowanych. Dynamiczny dostęp do właściwości (obj["payment_method"]) psuje się, gdy payment_method zostaje zmanglowane na a.
  • Zapomnienie o mapach źródeł. Bez plików .map błędy produkcyjne są nieczytelne.
  • Minifikacja CommonJS i ESM razem. Mieszane systemy modułów wymagają starannego tree-shakingu przed minifikacją.

Najczęściej zadawane pytania

Zwykle o 40–70% mniejszy bez kompresji, a po kompresji gzip lub Brotli kurczy się o kolejne 60–75%. Źródło o rozmiarze 100 KB często trafia do sieci jako ~15–25 KB.

Domyślne manglowanie (zmiennych lokalnych) jest niemal zawsze bezpieczne. Agresywne manglowanie nazw właściwości psuje każdy kod, który dynamicznie sięga po właściwości. Przed włączeniem starannie skonfiguruj listę reserved.

Tak, włącz opcję „Generuj mapę źródeł“, a narzędzie zwróci zminifikowany kod oraz plik .map, który przypisuje każdy bajt z powrotem do oryginalnego źródła. Wgraj oba pliki do swojego CDN, aby DevTools mogły wyświetlać czytelne ślady stosu.

Tak, obsługiwane są: await najwyższego poziomu (top-level await), pola klas, metody prywatne, scalanie wartości null (nullish coalescing), opcjonalne łańcuchy (optional chaining) oraz separatory liczbowe. W przypadku bardzo nowych propozycji (dekoratory na etapie 3) sprawdź odpowiednią flagę.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach