Softonic

JavaScript-minifierare

Steg 1 / 3

Klistra in ett skript eller en ES-modul på upp till 1 000 000 tecken, eller öppna en .js-fil.

Nästa: välj alternativ

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 /* */ (licenskommentarer som /*! kan behållas)
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
Sekvenser och booleska värden a(); b(); -> a(),b();, true -> !0

Säkert läge kontra aggressivt läge

  • Säkert behåller variabelnamn och tar endast bort blanksteg och kommentarer. 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[key], 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_" + type]) 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. Kryssa i “Skapa även en källkarta (source map)” så får du en .map-fil tillsammans med den minifierade koden. Den kopplar den minifierade koden till dina ursprungliga rader och namn, så att webbläsarens DevTools kan visa läsbar kod och läsbara stackspår. Lägg båda filerna i samma mapp: den minifierade koden slutar med en //# sourceMappingURL=-kommentar som hittar kartan via filnamnet. Kartan innehåller din ursprungliga kod, så publicera den bara där vem som helst får läsa koden.

Ja. Await på toppnivå (i ES-moduler), klassfält, privata metoder, nullish coalescing, optional chaining och numeriska avgränsare stöds. Dekoratorer stöds inte: kompilera dem först till vanlig JavaScript, precis som TypeScript eller JSX. Minifieraren konverterar aldrig nyare syntax till en äldre version: alternativet ECMAScript-version anger bara den nyaste syntax som den minifierade koden får använda för att spara byte.

Nej. Koden du klistrar in eller öppnar minifieras i din webbläsare. Den skickas inte till våra servrar och läggs inte till i sidans länk. Mellan stegen sparas den i den här flikens sessionslagring, som webbläsaren rensar när du stänger fliken.

Relaterade verktyg

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 från ett kort formulär: ange entry, output-mapp och mode, och slå sedan på TypeScript, Babel, en CSS-loader, HtmlWebpackPlugin och en dev-server.

SVG-blobgenerator

Generera organiska, slumpmässiga SVG-blobformer med justerbar komplexitet, kontrast och seed. Kopiera SVG-pathen för bakgrunder, hero-sektioner och avatarmasker.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

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.

SVG-våggenerator

Generera en mjuk SVG-vågavdelare för rubriker och sidfötter med justerbar amplitud, frekvens, färg och position upptill eller nedtill. Kopiera SVG-koden.

Verktyget finns på andra språk