Mniejsze pliki na produkcję, czytelny kod do debugowania
Ten minifikator zmniejsza CSS, JavaScript i HTML na potrzeby produkcji i pokazuje dokładnie, ile oszczędzasz: rozmiar oryginalny, rozmiar po minifikacji i rozmiar po gzip, czyli to, co faktycznie pobierają Twoi użytkownicy. JavaScript jest minifikowany za pomocą terser, minifikatora używanego przez większość nowoczesnych narzędzi do budowania, a CSS za pomocą csso, który dodatkowo scala zduplikowane reguły. Przełącz na Formatuj, aby zamienić zminifikowany bundle lub arkusz stylów z powrotem w czytelny kod z wcięciami. Kod jest przetwarzany w Twojej przeglądarce i nigdy nie jest wysyłany.
Jak zminifikować lub sformatować kod
- 1Wybierz język: CSS, JavaScript lub HTML. Upuszczenie pliku
.css,.jslub.htmlna pole wejściowe wybierze go automatycznie. - 2Wybierz Minifikuj, aby zmniejszyć kod, lub Formatuj, aby go uporządkować.
- 3Dostosuj opcje: dla JavaScriptu, czy skracać nazwy i kompresować; dla CSS, czy przebudowywać reguły; dla HTML, czy minifikować style i skrypty inline. Komentarze licencyjne są zachowywane, chyba że to wyłączysz.
- 4Sprawdź rozmiary pod wynikiem, aby zobaczyć oszczędność przed i po gzip.
- 5Skopiuj wynik lub pobierz go jako
.min.js,.min.csslub.html.
Co robi minifikacja
Minifikacja usuwa wszystko, czego przeglądarka nie potrzebuje do uruchomienia kodu: komentarze, wcięcia, znaki nowej linii i opcjonalne średniki. Dobre minifikatory idą dalej. terser zmienia nazwy zmiennych lokalnych na pojedyncze litery (mangling), usuwa nieosiągalny kod, z góry oblicza wyrażenia stałe i skraca instrukcje if do operatorów trójargumentowych. csso skraca kolory (#ff0000 staje się red), usuwa jednostki przy zerach i scala reguły o identycznych deklaracjach lub selektorach.
Wynik działa dokładnie tak samo jak oryginał, ale przed kompresją jest zwykle o 30–70% mniejszy w przypadku JavaScriptu i o 15–40% w przypadku CSS.
Dlaczego rozmiar po gzip ma znaczenie
Serwery WWW i CDN kompresują pliki tekstowe za pomocą gzip lub Brotli przed wysłaniem, więc na czas ładowania wpływa rozmiar skompresowany, a nie surowy. Kompresja już usuwa dużą część powtórzeń, na które celuje minifikacja, dlatego 60% oszczędności z minifikacji może po gzip skurczyć się do 20%. Nadal warto to mieć przy każdym wyświetleniu strony, a skracanie nazw szczególnie opłaca się także po kompresji.
Wartość gzip jest liczona dla poziomu 6, domyślnego w nginx i większości serwerów. Brotli daje zwykle jeszcze o 10–20% mniej.
Opcje wyjaśnione
- Skracaj nazwy
- Zmienia nazwy zmiennych lokalnych i parametrów funkcji na krótkie. Nazwy globalne i właściwości obiektów nigdy nie są zmieniane, więc kod wywoływany przez inne skrypty nadal działa.
- Kompresuj
- W JavaScripcie przebiegi optymalizacji terser: usuwanie martwego kodu, zwijanie stałych, inlining. W CSS przebudowa csso, która scala i zmienia kolejność reguł tam, gdzie jest to bezpieczne.
- Zachowaj komentarze licencyjne
- Zachowuje komentarze zaczynające się od /*! lub zawierające @license albo @preserve, których zachowania wymaga wiele licencji open source.
- CSS i JS inline
- W HTML minifikuje zawartość elementów <style> i <script> oraz atrybutów style. Bloki JSON-LD też są kompaktowane; skrypty innych typów pozostają nietknięte.
- Usuń cudzysłowy atrybutów
- Zapisuje class=nav zamiast class="nav", gdy HTML na to pozwala. To poprawny HTML, ale niektóre narzędzia XML i systemy szablonów go nie lubią, więc domyślnie opcja jest wyłączona.
Jak minifikowany jest HTML
Minifikacja HTML jest tu celowo ostrożna. Komentarze są usuwane, z wyjątkiem komentarzy warunkowych Internet Explorera. Ciągi białych znaków są zwijane do jednej spacji, a białe znaki obok elementów blokowych, takich jak <div> i <p>, gdzie i tak nie są wyświetlane, są usuwane. Między elementami inline zawsze zostaje jedna spacja, bo jej usunięcie połączyłoby <b>big</b> <i>world</i> w jedno słowo. Zawartość <pre> i <textarea> nigdy nie jest zmieniana.
Jeśli skrypt inline ma błąd składni, zostaje dokładnie w takiej postaci, w jakiej był, a Ty dostajesz informację, w której linii jest błąd, zamiast błędu całej strony.
Formatowanie zminifikowanego kodu
Formatowanie używa js-beautify do ponownego wcięcia kodu: jedna instrukcja na linię w JavaScripcie, jedna deklaracja na linię w CSS i zagnieżdżone wcięcia w HTML. To najszybszy sposób, by przeczytać zminifikowany skrypt zewnętrzny albo zrozumieć arkusz stylów skopiowany z przeglądarki. Nie da się odzyskać oryginalnych nazw zmiennych ani komentarzy usuniętych przez minifikator, ale strukturę łatwo prześledzić.
Inne formaty obsłużą JSON Formatter i formatowanie SQL.
Najczęstsze pytania
- Czy mój kod jest gdzieś wysyłany?
- Nie. terser, csso i js-beautify działają w Twojej przeglądarce, więc kod zostaje na Twoim urządzeniu.
- Czy zminifikowany JavaScript nadal będzie działał?
- Tak. terser wprowadza tylko zmiany zachowujące działanie kodu. Kod, który w czasie działania polega na nazwach funkcji lub klas, np. niektóre frameworki wstrzykiwania zależności, może wymagać wyłączenia skracania nazw.
- Czy obsługiwany jest nowoczesny JavaScript i moduły ES?
- Tak. terser rozumie nowoczesną składnię, w tym klasy, async/await, optional chaining i top-level await. Pliki z instrukcjami import lub export są minifikowane jako moduły ES.
- Czy można minifikować TypeScript lub JSX?
- Nie. Najpierw skompiluj TypeScript lub JSX do JavaScriptu, a potem zminifikuj wynik. Jeśli kod nie jest czystym JavaScriptem, pojawi się błąd składni z numerem linii i kolumny.
- Czym różni się minifikacja od gzip?
- Minifikacja przepisuje sam kod, by był krótszy. Gzip to kompresja, którą serwer stosuje do każdego pliku przy wysyłaniu. Działają razem: najpierw minifikuj, potem pozwól serwerowi kompresować.
- Czy mogę odminifikować JavaScript lub CSS?
- Tak. Wybierz Formatuj, aby ponownie wciąć zminifikowany kod. Oryginalnych nazw zmiennych i komentarzy nie da się odzyskać, ale struktura staje się czytelna.
- Dlaczego reguły w moim CSS są scalane lub przestawiane?
- To przebudowa csso, która scala reguły o tych samych deklaracjach lub selektorach. Jest bezpieczna dla zwykłych arkuszy stylów; wyłącz Kompresuj, jeśli polegasz na dokładnej kolejności reguł między selektorami o tej samej specyficzności.