JavaScript Minifier

Indsæt JavaScript for at gøre det mindre med Terser: død kode fjernes, navne forkortes, og mellemrum forsvinder. Syntaksfejl peger på den præcise linje og kolonne.

Kører i din browserIngen tilmeldingIntet uploades

Minificeret resultat

Sådan bruger du JavaScript Minifier

  1. Indsæt dit JavaScript, eller åbn en .js-fil.
  2. Vælg indstillinger: Forkort navne forkorter lokale variabler, Komprimér omskriver koden til en mindre ækvivalent, ES-modul tillader import/export på øverste niveau.
  3. Vælg det ECMAScript-mål, dine brugeres browsere understøtter. ES2020 er sikkert for alle evergreen-browsere.
  4. Tjek størrelse, besparelse og gzip-estimat under resultatet.
  5. Kopiér den minificerede kode, eller download den som output.min.js.

Hvad gør en JavaScript-minifier?

Minificering gør JavaScript mindre uden at ændre, hvad det gør. Værktøjet bruger Terser, minifieren bag webpack, Vite og Rollup, og foretager tre slags ændringer:

  • Fjernelse af mellemrum og kommentarer: JavaScript-motoren har ikke brug for indrykning, linjeskift og kommentarer.
  • Mangling: navne på lokale variabler og funktionsparametre som subtotal bliver til enkelte bogstaver. Globale navne og objektegenskaber røres ikke, så dit offentlige API fortsat virker.
  • Komprimering: konstante udtryk beregnes på forhånd, uopnåelig kode fjernes, if-sætninger bliver til ternære udtryk, og korte funktioner indlejres.

Minificering vs. gzip: har du brug for begge?

Ja. Gzip og Brotli komprimerer gentagne bytemønstre under overførslen, mens minificering fjerner bytes, som browseren ellers skulle downloade, parse og kompilere. Et typisk script skrumper 40–60 % ved minificering og derefter yderligere 60–70 % med gzip. Gzip-størrelsen, der vises her, er et godt estimat af, hvad din server faktisk sender.

Bevarelse af licenskommentarer

Mange open source-licenser (MIT, BSD, Apache) kræver, at copyrightmeddelelsen følger med koden. Efter konvention bevares kommentarer, der starter med /*! eller indeholder @license eller @preserve, når Bevar licenskommentarer er slået til.

Hvornår du ikke skal minificere i hånden

Hvis dit projekt allerede bruger en bundler, så lad den minificere produktionsbuilds og generere source maps til debugging. En online minifier er ideel til enkeltstående scripts, snippets til et CMS eller en tag manager, bookmarklets og til at se, hvor lille et stykke kode kan blive.

Ofte stillede spørgsmål

Bliver min kode uploadet til en server?
Nej. Terser kører i din browserfane, så proprietær kode forlader aldrig din maskine.
Kan minificering ødelægge min kode?
Terser foretager kun transformationer, der bevarer identisk opførsel for gyldig JavaScript. Kode, der er afhængig af Function.prototype.toString() eller af lokale variabelnavne via eval, kan blive påvirket; slå i så fald Forkort navne fra.
Understøttes moderne syntaks som async/await, klasser og optional chaining?
Ja. Terser parser ES2022+-syntaks. Mål-indstillingen styrer kun, hvilken syntaks outputtet må bruge; den transpilerer ikke nyere funktioner ned til ældre.
Hvad er forskellen på minify og uglify?
De betyder det samme. UglifyJS var det klassiske værktøj; Terser er dets vedligeholdte fork med fuld ES2015+-understøttelse.

Relaterede værktøjer