JavaScript-minifierare och formaterare

Vad är detta verktyg?

En JavaScript-minifierare skriver om kod för att vara så liten som möjligt samtidigt som den beter sig identiskt: den förkortar variabel- och funktionsnamn där det är säkert, tar bort kommentarer och whitespace, viker samman konstanter, och eliminerar oåtkomlig kod.

Verktyget bygger på Terser, den AST-baserade minifieraren som används av webpack, Vite, Rollup och de flesta moderna JavaScript-byggverktyg. Eftersom det faktiskt tolkar din kod istället för att mönstermatcha text, skiljer det korrekt en divisionsoperator från en regex-literal, förstör inte mallsträngar som innehåller //-liknande sekvenser, och byter inte namn på en variabel till något som krockar med något i ett yttre scope.

Varför använda det?

• AST-baserad minifiering (Terser), samma motor som används av stora bundlare — säker med regex-literaler, mallsträngar och closures.
• Byter namn på variabler för verklig storleksbesparing, inte bara borttagning av whitespace.
• Se exakt hur många byte och hur många procent du sparade.
• Formatläge gör obfuskerad, enradig minifierad JS läsbar och indenterad igen — användbart för att förstå tredjepartsskript.
• 100% lokal bearbetning — proprietär kod lämnar aldrig din webbläsare.

Så använder du det

1. Klistra in din JavaScript i inmatningsrutan, eller klicka på "Läs in exempel" för att testa ett prov med en regex-literal och en mallsträng.
2. Klicka på "Minifiera" för att komprimera den, eller "Formatera" för att snygga till den med 2-blankstegs indentering.
3. Kolla meddelandet under rutorna — minifieringsläget visar storleksminskningen; ett syntaxfel i din kod visar ett tydligt meddelande istället för att tyst producera trasig utdata.
4. Klicka på "Kopiera" för att hämta resultatet.

Exempel

Inmatning

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Resultat

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Variabelnamn förkortas, kommentaren och if-satsen slås samman till ett uttryck, men regex-literalen och mallsträngen bevaras exakt och beteendet är oförändrat.

Praktiska tips

• Minifiera vid byggtillfället, inte genom manuell redigering — behåll läsbar källkod under versionshantering och generera den minifierade bundlen som ett byggsteg.
• Om minifierad utdata beter sig oväntat, kontrollera kod som förlitar sig på Function.prototype.name eller reflektion — namnbyte kan orsaka detta i sällsynta gränsfall.
• Att formatera ett tredjepartsskript innan man läser det är mycket snabbare än att försöka tyda en enda 2 000-teckens rad.
• Kombinera med HTML- och CSS-minifierarna nedan om du förbereder en fullständig statisk bundle för driftsättning.

Var detta passar in i verkliga arbetsflöden

JavaScript är vanligtvis den största render- eller tolkningsblockerande tillgången på en sida, så att minifiera den har en verklig, mätbar effekt på laddningstiden — mer än HTML eller CSS byte för byte. De flesta moderna ramverk gör detta automatiskt vid byggtillfället, men handskrivna skript, webbläsartillägg och bokmärkeslänkar skickas ofta ominifierade om inte någon kör dem genom ett verktyg som detta.

Formateringsriktningen används ofta åt andra hållet: att felsöka ett produktionsfel från en minifierad stacktrace är mycket enklare när den omgivande koden är omformaterad och läsbar, även utan de ursprungliga variabelnamnen.

→ HTML-minifierare · CSS-minifierare

Vanliga användningsfall

• Krympa ett fristående skript eller bokmärkeslänk innan publicering.
• Omformatera ett minifierat skript hämtat från en live-webbplats för att förstå vad det gör.
• Städa upp JavaScript inklistrad från ett forumsinlägg eller AI-genererat kodavsnitt innan noggrann genomläsning.
• Snabbt kontrollera om ett handskrivet JS-avsnitt har ett syntaxfel, eftersom ett tolkningsfel visas som ett tydligt meddelande.

Vanliga frågor