JavaScript-minifisering og -formatering

Hva er dette verktøyet?

En JavaScript-minifisering skriver om kode til å være så liten som mulig mens den oppfører seg identisk: den forkorter variabel- og funksjonsnavn der det er trygt, fjerner kommentarer og mellomrom, folder konstanter og eliminerer uoppnåelig kode.

Dette verktøyet er bygget på Terser, den AST-baserte minifiseringen som brukes av webpack, Vite, Rollup og de fleste moderne JavaScript-byggeverktøy. Fordi det faktisk analyserer koden din i stedet for å mønstermatche tekst, skiller det korrekt en divisjonsoperator fra en regex-literal, ødelegger ikke malstrenger som inneholder //-lignende sekvenser, og gir ikke en variabel et navn som kolliderer med noe i et ytre skop.

Hvorfor bruke det?

• AST-basert minifisering (Terser), samme motor som brukes av de store bundlerne — trygg med regex-literaler, malstrenger og closures.
• Forkorter variabelnavn for reell størrelsesbesparelse, ikke bare fjerning av mellomrom.
• Se nøyaktig hvor mange bytes og hvilken prosent du sparte.
• Formateringsmodus gjør obfuskert, énlinjes minifisert JS tilbake til lesbar, innrykket kode — nyttig for å forstå tredjeparts-skript.
• 100 % lokal behandling — proprietær kode forlater aldri nettleseren din.

Slik bruker du det

1. Lim JavaScripten din inn i inndataboksen, eller klikk «Last inn eksempel» for å prøve et eksempel med en regex-literal og en malstreng.
2. Klikk «Minifiser» for å komprimere den, eller «Formater» for å pynte den med 2-mellomroms innrykk.
3. Sjekk meldingen under boksene — minifiseringsmodus viser størrelsesreduksjonen; en syntaksfeil i koden din viser en tydelig melding i stedet for å stille produsere ødelagt utdata.
4. Klikk «Kopier» for å hente resultatet.

Eksempel

Inndata

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"}

Variabelnavn forkortes, kommentaren og if-setningen slås sammen til et uttrykk, men regex-literalen og malstrengen bevares nøyaktig og oppførselen er uendret.

Praktiske tips

• Minifiser ved byggetidspunktet, ikke ved håndredigering — hold lesbar kildekode i versjonskontroll og generer den minifiserte bunten som et byggesteg.
• Hvis minifisert utdata oppfører seg uventet, sjekk etter kode som er avhengig av Function.prototype.name eller refleksjon — navneforkorting gir funksjoner nye navn, og det kan dukke opp i sjeldne kanttilfeller.
• Å formatere et tredjeparts-skript før du leser det er mye raskere enn å prøve å tolke en enkelt linje på 2000 tegn.
• Kombiner med HTML- og CSS-minifiseringene under hvis du forbereder en full statisk bunt for utrulling.

Hvor dette passer inn i reelle arbeidsflyter

JavaScript er vanligvis den største render-blokkerende eller parse-blokkerende ressursen på en side, så å minifisere den har en reell, målbar effekt på lastetid — mer enn HTML eller CSS byte for byte. De fleste moderne rammeverk gjør dette automatisk ved byggetidspunkt, men håndskrevne skript, nettleserutvidelser og bokmerkeletter sendes ofte uminifisert med mindre noen kjører dem gjennom et verktøy som dette.

Formateringsretningen brukes ofte omvendt: å feilsøke en produksjonsfeil fra en minifisert stakksporing er mye enklere når den omkringliggende koden er omformatert og lesbar, selv uten de originale variabelnavnene.

→ HTML-minifikator · CSS Minifier

Vanlige bruksområder

• Krympe et frittstående skript eller bokmerkelett før publisering.
• Omformatere et minifisert skript hentet fra et live nettsted for å forstå hva det gjør.
• Rydde opp i JavaScript limt inn fra et forumsinnlegg eller et AI-generert utdrag før nøye gjennomlesning.
• Raskt sjekke om et håndskrevet JS-utdrag har en syntaksfeil, siden en parse-feil vises som en tydelig melding.

Ofte stilte spørsmål