Softonic

Minifikator JavaScripta

Krok 1 / 3

Wklej skrypt lub moduł ES (do 1 000 000 znaków) albo otwórz plik .js.

Dalej: wybierz opcje

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 /* */ (komentarze licencyjne, np. /*!, można zachować)
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
Sekwencje i wartości logiczne a(); b(); -> a(),b();, true -> !0

Tryb bezpieczny kontra agresywny

  • Bezpieczny zachowuje nazwy zmiennych i usuwa tylko białe znaki oraz komentarze. 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[key], 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_" + type]) 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. Zaznacz „Utwórz też mapę źródeł (source map)”, a razem ze zminifikowanym kodem dostaniesz plik .map. Wiąże on zminifikowany kod z oryginalnymi wierszami i nazwami, dzięki czemu narzędzia deweloperskie przeglądarki pokazują czytelny kod i ślady stosu. Umieść oba pliki w tym samym folderze: zminifikowany kod kończy się komentarzem //# sourceMappingURL=, który wskazuje mapę po nazwie pliku. Mapa zawiera Twój oryginalny kod, więc publikuj ją tylko tam, gdzie każdy może ten kod przeczytać.

Tak. Obsługiwane są: await najwyższego poziomu (w modułach ES), pola klas, metody prywatne, operator ?? (nullish coalescing), opcjonalne łańcuchowanie (optional chaining) i separatory liczbowe. Dekoratory nie: najpierw skompiluj je do zwykłego JavaScriptu, tak jak TypeScript czy JSX. Minifikator nigdy nie przekształca nowszej składni do starszej wersji: opcja wersji ECMAScript określa tylko najnowszą składnię, której zminifikowany kod może użyć, aby zaoszczędzić bajty.

Nie. Kod, który wklejasz lub otwierasz, jest minifikowany w Twojej przeglądarce. Nie trafia na nasze serwery ani do linku strony. Między krokami jest przechowywany w pamięci sesji tej karty, którą przeglądarka czyści po zamknięciu karty.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Konwerter liczb szesnastkowych na dziesiętne

Przeliczaj liczby szesnastkowe na dziesiętne (system o podstawie 10). Działa z adresami pamięci, kodami błędów, kanałami RGB oraz liczbami całkowitymi o dowolnej precyzji.

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