Minificatore JavaScript e CSS

Cosa fa

La minificazione rimuove tutto ciò di cui un browser non ha bisogno per eseguire il codice: spazi, a capo, commenti e nomi lunghi. I file più piccoli si scaricano più in fretta, il che migliora i tempi di caricamento delle pagine e i Core Web Vitals, soprattutto sulle reti mobili.

Questo strumento minifica il JavaScript con Terser, il minificatore usato da webpack, Rollup e Vite, e il CSS con CSSO, che ristruttura anche i fogli di stile: accorcia i colori (da #ffffff a #fff), rimuove unità e valori ridondanti (da 0px 0px a 0) e unisce le regole che condividono selettori o dichiarazioni.

Come si usa

1. Incolla il codice nel riquadro Input, trascinaci sopra un file .js o .css, oppure clicca su Esempio.
2. Scegli JavaScript o CSS.
3. Per il JavaScript, Accorcia i nomi delle variabili rinomina variabili locali e parametri con lettere singole. I nomi esportati e globali non vengono mai modificati.
4. Per il CSS, Unisci le regole duplicate combina le regole con le stesse dichiarazioni.
5. Copia il risultato o scaricalo. I contatori di dimensione sotto ogni riquadro mostrano quanto hai risparmiato.

Se il JavaScript contiene un errore di sintassi, il messaggio di errore mostra riga e colonna, così puoi saltarci direttamente.

Esempio

// 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)
}

diventa

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

Quando usarlo

Usalo per un’operazione veloce e occasionale: uno snippet per una CDN, uno script inline in un’email HTML, un bookmarklet, o per vedere quanto potrebbe diventare piccola una libreria. In un progetto vero è il tuo bundler a dover minificare a ogni build, così il sorgente resta leggibile.