DT Dev Tools

JavaScript Minifier — JavaScript-minifierare

Minifiera JavaScript med Terser i webblÀsaren: komprimera kod, förkorta namn, ta bort console-anrop och jÀmför filstorleken före och efter.

🔒 Körs helt i din webblĂ€sare — ingenting laddas upp

Drop a .js file here or click to browse — or paste code below

Before: –After: –Saved: –
Var verktyget anvÀndbart? BetygsÀtt det:

SĂ„ fungerar minifiering av JavaScript

Minifiering gör JavaScript mindre utan att Àndra vad koden gör. Verktyget anvÀnder Terser, en beprövad minifierare som tolkar din kod till ett abstrakt syntaxtrÀd, omvandlar det och skriver ut koden igen utan onödiga blanksteg och kommentarer. Steget compress tillÀmpar dussintals optimeringar: det tar bort kod som aldrig kan nÄs och oanvÀnda variabler, bÀddar in konstanter, slÄr ihop efterföljande variabeldeklarationer, gör om if-satser till kortare villkorsuttryck dÀr det gÄr och rÀknar ut enkla konstanta uttryck i förvÀg. DÀrefter byter steget mangle namn pÄ lokala variabler, parametrar och funktionsnamn till en eller tvÄ bokstÀver. Egenskapsnamn och globala variabler lÀmnas orörda, sÄ kodens publika beteende förblir detsamma.

StorleksmĂ€rkena visar UTF-8-storleken i byte för in- och utdata samt hur mĂ„nga procent som sparats. Vanlig handskriven kod krymper med 40–70 %; kod som redan Ă€r kompakt eller domineras av lĂ„nga strĂ€ngar krymper mindre. TĂ€nk pĂ„ att servrar oftast komprimerar JavaScript igen med gzip eller Brotli, sĂ„ den verkliga besparingen vid överföringen Ă€r mindre Ă€n rĂ„siffran, men minifierad kod tolkas Ă€ndĂ„ snabbare och krĂ€ver mindre bandbredd.

VÀlja rÀtt alternativ

ECMAScript target talar om för Terser vilken syntax som fĂ„r anvĂ€ndas i utdata. Med ES2020 kan den skapa pilfunktioner, optional chaining och andra moderna konstruktioner; med ES5 undviker den att införa nyare syntax, men den transpilerar inte modern kod som du sjĂ€lv har skrivit – anvĂ€nd ett verktyg som Babel eller esbuild för det. Keep console.* behĂ„ller loggningen, vilket Ă€r praktiskt för staging-byggen. Aktivera ES module för filer som anvĂ€nder import/export; dĂ„ kan Ă€ven namn pĂ„ toppnivĂ„ förkortas eftersom modulens scope Ă€r privat.

Privat frÄn grunden

Minifieraren laddas vid behov och körs lokalt, sÄ din kÀllkod laddas aldrig upp. DÀrför passar den bra för snabba engÄngsuppgifter, till exempel att krympa ett inline-skript, ett bokmÀrkesprogram (bookmarklet) eller ett kodavsnitt till en tagghanterare frÄn tredje part. Om Terser rapporterar ett syntaxfel innehÄller meddelandet rad och kolumn sÄ att du kan rÀtta indata. För produktionspaket bör du lÄta minifieringen ligga kvar i byggkedjan sÄ att den Àr reproducerbar, och generera source maps för felsökning.

Hur man anvÀnder

  1. LÀgg till din kodKlistra in JavaScript i inmatningsfÀltet eller slÀpp en .js-fil i slÀppytan.
  2. VÀlj alternativSlÄ pÄ eller av komprimering, namnförkortning, borttagning av console, modullÀge och ECMAScript-mÄl.
  3. MinifieraKlicka pÄ Minify JavaScript för att se resultatet med storleken före, efter och hur mÄnga procent som sparats.
  4. Kopiera eller ladda nerKopiera den minifierade koden eller ladda ner den som en .min.js-fil.

Vanliga frÄgor

Vilken minifierare anvÀnds?
Terser, som Àr standardminifieraren för JavaScript i webpack och ett valbart alternativ i Vite och Rollup. Den körs helt i din webblÀsare.
Vad Àr skillnaden mellan compress och mangle?
Compress skriver om koden till en kortare, likvÀrdig form genom att ta bort död kod, rÀkna ut konstanter och förenkla uttryck. Mangle byter namn pÄ lokala variabler och funktionsparametrar till korta namn. BÄda Àr sÀkra för vanlig kod och kan slÄs pÄ eller av var för sig.
Varför försvann mina console.log-anrop?
Som standard tar komprimeraren bort console.*-anrop, vilket Àr vanligt i produktionspaket. Markera Keep console.* för att behÄlla dem.
NĂ€r ska jag aktivera ES module?
Aktivera det om filen anvÀnder import- eller export-satser. ModullÀget lÄter ocksÄ Terser förkorta namn pÄ toppnivÄ, vilket Àr sÀkert för moduler men kan förstöra klassiska skript som exponerar globala variabler.

Relaterade verktyg

{}

JSON Formatter — formatera, validera och minifiera JSON

Formatera, validera och minifiera JSON med ett hopfÀllbart trÀdvy, exakt felrad och kolumn, nyckelsortering och stöd för JSON5/JSONC. Körs helt i webblÀsaren.

Formatera
 </>

HTML Beautifier — HTML-formaterare

Formatera eller komprimera HTML-, CSS- och JavaScript-kodstycken i webblÀsaren med js-beautify. Gratis, snabbt och utan att nÄgon fil laddas upp.

Formatera
 📐

XML Formatter — XML-formatterare

Validera och formatera XML, med valfri konvertering frÄn XML till JSON, lokalt i webblÀsaren och utan uppladdning.

Formatera
 đŸ—ƒïž

SQL Formatter — SQL-formatterare

Formatera SQL-frÄgor för vanliga dialekter direkt i webblÀsaren, med indrag, versaler eller gemener för nyckelord och snabb kopiering.

Formatera
 🔍

JSON Diff — JĂ€mför JSON

JÀmför tvÄ JSON-objekt rekursivt och markera tillagda, borttagna och Àndrade nycklar lokalt i webblÀsaren, utan att nÄgon data laddas upp till en server.

Formatera
 ✹

Code Formatter (Prettier) — Kodformaterare

Formatera JavaScript, TypeScript, CSS, SCSS, Less, HTML, JSON, GraphQL, Markdown och YAML med Prettier, helt i din webblÀsare.

Formatera