Minifikator JavaScript i CSS

Do czego służy

Minifikacja usuwa wszystko, czego przeglądarka nie potrzebuje do uruchomienia kodu: białe znaki, podziały wierszy, komentarze i długie nazwy. Mniejsze pliki pobierają się szybciej, co skraca czas ładowania strony i poprawia Core Web Vitals, zwłaszcza w sieciach komórkowych.

To narzędzie minifikuje JavaScript za pomocą Terser, minifikatora używanego przez webpack, Rollup i Vite, oraz CSS za pomocą CSSO, który dodatkowo restrukturyzuje arkusze stylów: skraca kolory (#ffffff do #fff), usuwa zbędne jednostki i wartości (0px 0px do 0) i scala reguły o wspólnych selektorach lub deklaracjach.

Jak używać

1. Wklej kod w polu Wejście, upuść na nie plik .js lub .css albo kliknij Przykład.
2. Wybierz JavaScript lub CSS.
3. W JavaScripcie opcja Skracaj nazwy zmiennych zmienia nazwy zmiennych lokalnych i parametrów na pojedyncze litery. Nazwy eksportowane i globalne nigdy nie są zmieniane.
4. W CSS opcja Scalaj zduplikowane reguły łączy reguły o tych samych deklaracjach.
5. Skopiuj wynik lub go pobierz. Liczniki rozmiaru pod każdym polem pokazują, ile zaoszczędziłeś.

Jeśli JavaScript zawiera błąd składni, komunikat błędu pokazuje wiersz i kolumnę, więc możesz do nich od razu przejść.

Przykład

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

daje

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Kiedy z niego korzystać

Używaj go do szybkich, jednorazowych zadań: fragmentu dla CDN, skryptu inline w e-mailu HTML, bookmarkletu albo sprawdzenia, jak bardzo da się zmniejszyć bibliotekę. W prawdziwym projekcie minifikacją powinien zajmować się bundler przy każdym buildzie, aby kod źródłowy pozostał czytelny.