Minifikuj / Upiększaj

Minifikuj lub upiększaj kod. Wszystko pozostaje w przeglądarce.

Jak działa Minifikuj / Upiększaj

Minifikacja i upiększanie kompresuje HTML, CSS i JavaScript przez usuwanie komentarzy, niepotrzebnych białych znaków i redundantnych znaków, albo rozszerza zminifikowany kod z powrotem do czytelnej formy z wcięciami. Całe przetwarzanie odbywa się w przeglądarce za pomocą dołączonych parserów; nic z tego co wklejasz, nie jest nigdzie przesyłane. Nic z tego co tu wpisujesz, nie opuszcza Twojego urządzenia.

Minifikacja bezpośrednio wpływa na wydajność ładowania strony: mniejsze pliki transferują się szybciej, parsują się szybciej i zużywają mniej przepustowości. W przypadku wdrożeń produkcyjnych zminifikowane zasoby są standardem. To narzędzie jest przydatne, gdy otrzymujesz zminifikowany plik do odczytania (upiększanie), gdy chcesz sprawdzić, co minifikator robi ze snippetem przed zintegrowaniem go z potokiem budowania, albo gdy potrzebujesz szybkiej jednorazowej minifikacji bez konfigurowania narzędzia do budowania.

Napisał Bastien Sulyan

Minifikuj / Upiększaj: instrukcja krok po kroku

Wklej kod HTML, CSS lub JavaScript do pola wejściowego.
Wybierz typ języka z listy rozwijanej (HTML, CSS lub JavaScript).
Kliknij „Minifikuj”, aby uzyskać skompresowaną wersję, lub „Upiększ”, aby rozwinąć i wciąć kod.
Skopiuj wynik z pola wyjściowego za pomocą przycisku kopiowania.
Wklej inny kod i powtórz w razie potrzeby.

Typowe zastosowania

Programista frontendowy chce zminifikować krytyczny snippet CSS, aby osadzić go w nagłówku HTML dla wydajności above-the-fold.
Programista otrzymuje zminifikowany skrypt zewnętrzny i musi go upiększyć, aby zrozumieć jego logikę podczas przeglądu bezpieczeństwa.
Autor techniczny potrzebuje sformatowanej wersji zminifikowanego tagu skryptu JSON-LD do uwzględnienia w dokumentacji.
Programista webowy sprawdza oszczędności bajtów z minifikacji pliku CSS przed podjęciem decyzji, czy dodać krok budowania.

Często zadawane pytania

Czy kod, który tu wklejam, jest wysyłany na serwer do minifikacji?

Nie. Minifikację i upiększanie wykonuje własny kod strony, napisany specjalnie dla tego narzędzia, a nie zaczerpnięty z zewnętrznego minifikatora. Całe przetwarzanie pozostaje w karcie przeglądarki. Nic z tego, co tu wklejasz, nie jest przesyłane do Sunasty ani żadnej strony trzeciej.

Czy minifikacja JavaScript zachowuje oryginalne działanie kodu?

Dobry minifikator zachowuje działanie, usuwając tylko białe znaki, skracając nazwy zmiennych w kontrolowanym zakresie i usuwając komentarze. To narzędzie celuje w bezpieczne transformacje. Agresywne optymalizacje, takie jak eliminacja martwego kodu lub wstawianie funkcji, zazwyczaj nie są stosowane, ponieważ wymagają analizy całego programu.

Czy mogę zminifikować, a następnie upiększyć wynik, aby go zweryfikować?

Tak. Najpierw zminifikuj kod, a następnie wklej zminifikowany wynik z powrotem do pola wejściowego i kliknij Upiększ. Upiększona wersja będzie wyglądać inaczej niż oryginalne źródło (nazwy zmiennych mogą być skrócone, komentarze usunięte), ale będzie strukturalnie równoważna.

Czy minifikacja HTML usuwa wszystkie komentarze?

Narzędzie usuwa standardowe komentarze HTML () podczas minifikacji. Komentarze warunkowe używane przez starsze wersje IE () są zawsze zachowywane, więc usuwanie komentarzy nie może naruszyć starszego działania, które od nich zależy.

Czy istnieje ograniczenie rozmiaru kodu, który mogę zminifikować?

Ograniczeniem jest dostępna pamięć karty przeglądarki. Kod do kilkuset kilobajtów przetwarza się szybko. Dla dużych pakietów JavaScript (megabajty) dedykowane narzędzie do budowania, takie jak esbuild, Terser lub Lightning CSS, jest szybsze i bardziej odpowiednie do użytku produkcyjnego.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia dla programistów