JavaScript- en CSS-minifier

Wat het doet

Minificatie verwijdert alles wat een browser niet nodig heeft om je code uit te voeren: witruimte, regeleinden, commentaar en lange namen. Kleinere bestanden downloaden sneller, wat de laadtijd van pagina’s en de Core Web Vitals verbetert, vooral op mobiele netwerken.

Deze tool minificeert JavaScript met Terser, de minifier die webpack, Rollup en Vite gebruiken, en CSS met CSSO, dat stylesheets ook herstructureert: het verkort kleuren (#ffffff naar #fff), verwijdert overbodige eenheden en waarden (0px 0px naar 0) en voegt regels samen die selectors of declaraties delen.

Zo gebruik je het

1. Plak code in het veld Invoer, sleep er een .js- of .css-bestand op, of klik op Voorbeeld.
2. Kies JavaScript of CSS.
3. Voor JavaScript hernoemt Variabelenamen inkorten lokale variabelen en parameters naar losse letters. Geëxporteerde en globale namen worden nooit gewijzigd.
4. Voor CSS combineert Dubbele regels samenvoegen regels met dezelfde declaraties.
5. Kopieer het resultaat of download het. De groottetellers onder elk veld laten zien hoeveel je hebt bespaard.

Als het JavaScript een syntaxfout bevat, toont de foutmelding de regel en kolom, zodat je er direct naartoe kunt springen.

Voorbeeld

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

wordt

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

Wanneer gebruik je het

Gebruik het voor een snelle eenmalige klus: een snippet voor een CDN, een inline script in een HTML-e-mail, een bookmarklet, of om te kijken hoe klein een library zou kunnen worden. In een echt project hoort je bundler bij elke build te minificeren, zodat de broncode leesbaar blijft.