Softonic

JavaScript-minifierare

Steg 1 / 3
Nästa

Kopiera JavaScript-koden och få en minifierad version som är 40–70 % mindre – med borttagen tomrum, variabler förkortade till enskilda bokstäver, obenyttade grenar borttagna, konstanter sammanfogade samt kommentarer rensade (om du aktiverar det). Användbar vid snabba storlekskontroller, engångsinbäddningar och landningssidor där du inte använder en komplett byggnadsverktygskedja.

Så minifierar du JavaScript

  1. 1

    Klistra in källan

    All giltig JavaScript i ES5+ eller senare. För ES6 och senare (mallsträngar, klasser, moduler), se till att din målversion stämmer.

  2. 2

    Välj minifieringsnivå

    Säker (blanksteg + kommentarer), standard (+ mangling av variabler), aggressiv (+ mangling av egenskapsnamn, kan bryta DOM-åtkomst).

  3. 3

    Minifiera

    Verktyget kör en Terser-kompatibel transformation och returnerar resultatet med antalet byte före och efter.

  4. 4

    Kopiera eller ladda ner

    Klistra in utdata i en `<script>`-tagg eller spara som `.min.js` för att leverera den från din CDN.

Vart byten tar vägen

En typisk minifierad fil är 40–70 % mindre än källfilen. Genom att paketera den med gzip (eller Brotli, som används av Cloudflare och de flesta CDN-tjänster) minskas storleken ytterligare med 60–75 %. Sammanlagt kan en källfil på 100 KB överföras för cirka 15–25 KB via nätverket.

Källa Minifierad +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Använda tekniker

Teknik Vad den gör
Borttagning av blanksteg Tar bort blanksteg, tabbar och radbrytningar
Borttagning av kommentarer Tar bort // och /* */ (utom !important)
Mangling av variabelnamn Byter namn på userName -> u (scope-säkert)
Mangling av egenskapsnamn Byter namn på obj.foo -> obj.a (OSÄKERT)
Konstantvikning 1 + 2 + 3 → 6
Borttagning av död kod Tar bort grenar efter return
Inlining av kontrollflöde Infogar små funktioner som bara används en gång
Komprimering av stränglitteraler Slår samman upprepade strängkonstanter

Säkert läge kontra aggressivt läge

  • Säkert behåller variabelnamn och tar endast bort blanksteg. Bra för felsökning när du vill ha läsbara stackspår.
  • Standard manglar lokala variabler men behåller globala namn och egenskapsnamn. Fungerar med det mesta av all kod.
  • Aggressivt manglar allt, inklusive egenskapsnamn. Det bryter ofta kod som når egenskaper dynamiskt (obj["prop"], Object.keys(obj)) om du inte konfigurerar reserverade namn.

När du ska minifiera – och när du inte ska

  • Minifiera i produktion, på varje tillgång som webbläsaren laddar ner.
  • Tillhandahåll en källkarta så att webbläsarens DevTools fortfarande kan visa de ursprungliga namnen vid felsökning.
  • Minifiera inte under utveckling – du slösar byggtid och förlorar läsbara fel.
  • Minifiera inte redan minifierad kod. .min.js-filer krymper med ungefär 1–3 % vid omminifiering, samtidigt som du riskerar att de går sönder.

Vanliga misstag

  • Att inte konfigurera reserverade namn. Dynamisk åtkomst till egenskaper (obj["payment_method"]) bryts när payment_method manglas till a.
  • Att glömma källkartor. Utan .map-filer är produktionsfel oläsbara.
  • Att minifiera CommonJS och ESM tillsammans. Blandade modulsystem kräver noggrann tree-shaking innan minifieringen.

Vanliga frågor

Vanligtvis är filstorleken 40–70 % mindre utan komprimering och minskar ytterligare med 60–75 % när den komprimeras med Gzip eller Brotli. En källfil på 100 KB skickas ofta som cirka 15–25 KB via nätverket.

Standardmangling (av lokala variabler) är nästan alltid säker. Aggressiv mangling av egenskapsnamn bryter all kod som når egenskaper dynamiskt. Konfigurera reserved-listan noggrant innan du aktiverar den.

Ja, aktivera alternativet “generera källkarta” så returnerar verktyget den minifierade koden tillsammans med en fil med namnet .map som kopplar varje byte till den ursprungliga källkoden. Ladda båda upp till din CDN så att DevTools kan visa läsbara stackspår.

Ja – top-level await, klassfält, privata metoder, nullish coalescing, optional chaining och numeriska avgränsare stöds alla. För mycket nya förslag (dekoratorer i stage-3) kollar du den specifika flaggan.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Verktyget finns på andra språk