Przegląd / Programowanie i kod / Minifikator kodu
Programowanie i kod 100% w przeglądarce i offline

Minifikator kodu

Zminifikuj JavaScript przez Terser i CSS przez csso w przeglądarce, z oszczędnością w bajtach i po gzip.

Wklej lub wpisz dane; wynik pojawia się od razu, a błędy są pokazane pod polem.

Twoje pliki i dane nigdy nie opuszczają przeglądarki – nic nie jest wysyłane.

Opcje

Nazwy najwyższego poziomu zostają bez zmian, dopóki nie włączysz ich skracania. Ta opcja może zepsuć skrypty, które wywołują się nawzajem między plikami albo używają zmiennych globalnych z HTML. Komentarze licencyjne zaczynają się od /*! albo zawierają @license lub @preserve. Wersja określa najnowszą składnię, jaką Terser może zapisać. Usuwanie console i debugger wymaga opcji „Kompresuj kod".

Limity: 2 000 000 znaków. Rozmiary podajemy w bajtach UTF-8. Wiersz gzip pojawia się tylko wtedy, gdy przeglądarka ma CompressionStream. HTML nie jest minifikowany. Minifikacja zmienia kod, więc przetestuj wynik przed wdrożeniem. Kod jest przetwarzany na tej stronie i nigdzie nie jest wysyłany.

Minifikacja JavaScript i CSS bez konfiguracji bundlera

Skrypt do statystyk wklejony w stopkę sklepu, arkusz stylów od poprzedniego wykonawcy: żaden z tych plików nie jest wart konfiguracji webpacka. Wklej kod, a obok pojawi się wersja zminifikowana. JavaScript przetwarza Terser, CSS przetwarza csso.

Kroki

  1. Wybierz u góry JavaScript albo CSS.
  2. Zastąp przykład własnym kodem. Wynik odświeża się około 300 ms po ostatnim znaku.
  3. Ustaw opcje, na przykład Skracaj nazwy zmiennych albo Usuń wywołania console.*.
  4. Kliknij Kopiuj lub Pobierz. Plik nazywa się script.min.js albo styles.min.css.

Opcje JavaScript

Terser potrafi skompresować kod (krótsze wyrażenia, usunięty martwy kod) i skrócić nazwy. Zmienne lokalne i parametry są skracane, jeśli tego chcesz. Nazwy najwyższego poziomu domyślnie zostają, bo inny plik albo atrybut onclick w HTML może wywoływać je po nazwie. Włącz skracanie tylko dla kodu samodzielnego.

Opcja Zachowaj nazwy klas i funkcji chroni nazwy, które odczytujesz przez .name lub które muszą być czytelne w komunikatach o błędach. Wersja (ES2015, ES2017, ES2020, ES2022) ogranicza składnię, jaką Terser może zapisać. Komentarze można usunąć wszystkie, zostawić tylko licencyjne (/*!, @license, @preserve) albo zostawić wszystkie.

Co csso robi z arkuszem stylów

csso zamienia margin: 0px 0px 0px 0px na margin:0, skraca kolory i usuwa komentarze. Przy włączonej opcji Restrukturyzuj reguły łączy też reguły o tych samych deklaracjach. Jeśli układ strony zależy od kolejności reguł, wyłącz ją. Zmienne CSS i bloki @media zostają.

Limity i dane

Dane wejściowe mogą mieć najwyżej 2 000 000 znaków. Rozmiary to bajty UTF-8. Wiersz gzip pojawia się tylko wtedy, gdy przeglądarka ma CompressionStream. Błąd składni JavaScript pokazuje wiersz i kolumnę, ale csso nie zgłasza błędów CSS i zepsuta część może zniknąć bez komunikatu. HTML nie jest minifikowany.

Minifikacja zmienia kod. Dla nietypowego kodu nie ma gwarancji identycznego działania, więc przetestuj gotowy plik. Terser i csso działają w twojej przeglądarce. Przy pierwszym użyciu strona pobiera plik biblioteki z własnego serwera, co widać w zakładce sieci. Potem kliknięcie przycisku niczego nie wysyła. Kod nie jest przesyłany ani uruchamiany.

Często zadawane pytania (FAQ)

Tylko gdy nic poza plikiem nie używa tych nazw. Atrybuty onclick w HTML i inne skrypty wywołujące twoje funkcje po nazwie przestałyby działać, dlatego opcja jest domyślnie wyłączona.