Hopp til innhold
🛠️
Whiz Tools

JavaScript Minifiserer - Gratis Online JS Kode Optimerer

Gratis JavaScript minifiseringsverktøy for å redusere kodestørrelse ved å fjerne mellomrom og kommentarer. Optimaliser JS-filer umiddelbart uten installasjon.

JavaScript Minifiserer

Om dette verktøyet

Denne enkle JavaScript-minifiseren fjerner unødvendig mellomrom og kommentarer for å redusere størrelsen på koden din. Den bevarer funksjonaliteten mens den gjør koden din mer kompakt.

  • Fjerner unødvendig mellomrom (mellomrom, tabs, linjeskift)
  • Fjerner kommentarer (både enkeltlinje og flerlinje)
  • Bevarer strenglitteraler og regulære uttrykk
  • Opprettholder kodens funksjonalitet
Lastekalkulator...
📚

Dokumentasjon

Hva er en JavaScript-minifiserer?

En JavaScript-minifiserer er et verktøy som gjør JavaScript-kildekode mindre ved å fjerne tegn som en nettleser ikke trenger for å kjøre den, for eksempel ekstra mellomrom, linjeskift og kommentarer. Koden gjør fortsatt nøyaktig det samme etter minifisering. Bare filstørrelsen endres.

Mindre JavaScript-filer lastes ned og innleses raskere, så minifisering er et vanlig trinn før et nettsted publiseres.

Slik fungerer JavaScript-minifisering

Dette verktøyet leser koden ett tegn om gangen og bygger den opp på nytt. Det forkaster alt som leseren trenger, men JavaScript-motoren ikke trenger. Det fjerner:

  • Kommentarer, både // single-line-kommentarer og /* multi-line */-kommentarer, inkludert kommentarer i JSDoc-stil.
  • Ekstra mellomrom, tabulatorer og tomme linjer som bare finnes for å gjøre koden enklere å lese.

Det legger ikke til eller fjerner noe annet. Det sletter aldri et semikolon, en parentes eller noe annet tegn som allerede fantes i koden, og det setter aldri inn ny tegnsetting. Det lar også flere ting være urørt:

  • Tekst i strenger ("like this", 'like this') og mal-litteraler (`like this`), selv om teksten inneholder mellomrom eller ser ut som en kommentar.
  • Regulære uttrykkslitteraler, for eksempel /[a-z]+/g, sammen med alle flaggene deres: d, g, i, m, s, u, v og y.
  • Alle semikolon, kommaer og parenteser som den opprinnelige koden allerede inneholdt.

Noen ganger kan et mellomrom mellom to symboler ikke fjernes uten at betydningen endres. return a kan ikke bli til returna, fordi det ville blitt lest som ett enkelt ord. Det samme gjelder navn som skrives med bokstaver utenfor det engelske alfabetet, så typeof π beholder mellomrommet. Når fjerning av et mellomrom ville slått sammen to symboler, beholder verktøyet ett enkelt mellomrom.

Et linjeskift kan også ha betydning. JavaScript setter noen ganger automatisk inn et semikolon på slutten av en linje, etter en regel som kalles automatisk semikoloninnsetting. Hvis sletting av et linjeskift kunne utløse eller hindre denne regelen, eller hvis linjeskiftet følger en avsluttende klammeparentes }, beholder verktøyet ett enkelt linjeskift der. Derfor presses minifisert kode ikke alltid sammen til én linje: Noen linjeskift endrer betydningen av koden og må beholdes.

Slik bruker du denne JavaScript-minifisereren

  1. Lim inn JavaScript-kode i inndatafeltet.
  2. Velg «Minify».
  3. Les resultatet i utdatafeltet, sammen med den opprinnelige størrelsen, den minifiserte størrelsen og prosentvis reduksjon.
  4. Velg «Copy» for å kopiere den minifiserte koden.

Minifiseringen kjører i nettleserfanen, så koden lastes ikke opp noe sted for behandling. Verktøyet kopierer også den innlimte koden inn i sidens adresse, slik at et resultat er enkelt å bokmerke eller dele. Alle som kan se adressen, kan derfor se koden.

Eksempel: minifisering av en funksjon

Før:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Etter:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Alle de tre kommentarene forsvinner, og innrykkingen fjernes. Semikolonet etter a+b blir stående, fordi verktøyet aldri sletter et semikolon som allerede fantes. Linjeskiftet før const blir også stående, fordi det følger en avsluttende }.

Eksempel: minifisering av en klasse

Før:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Etter:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Legg merke til at et linjeskift blir stående før hver metode og før klassens avsluttende }. Alle disse linjeskiftene følger en avsluttende } i den opprinnelige koden, så regelen som beskytter automatisk semikoloninnsetting, beholder dem. Semikolonene inne i hver metode blir også stående.

Formel for størrelsesreduksjon

Verktøyet viser tre tall under utdatafeltet: den opprinnelige størrelsen, den minifiserte størrelsen og reduksjonen. Alle størrelser er antall tegn, ikke byte. Reduksjonen er en prosentandel som avrundes til nærmeste hele tall:

1reduction = round((1 - minified characters / original characters) x 100)
2

Funksjonseksempelet ovenfor har 213 tegn før minifisering og 103 etterpå. Dermed er 1–103 / 213 = 0,5164, som er 51,64 %, og verktøyet viser 52 %. Klasseeksempelet går fra 515 tegn til 304, som er 40,97 %, vist som 41 %.

Begrensninger ved denne minifisereren

Dette verktøyet fjerner bare kommentarer og mellomrom. I motsetning til verktøy for byggesteg, som Terser eller UglifyJS, gir det ikke variabler nye navn, sletter ikke ubrukt kode og slår ikke sammen filer. Slike verktøy gir vanligvis mindre utdata, men krever en byggeprosess for å kjøre. Dette verktøyet fungerer umiddelbart i nettleseren uten oppsett, noe som passer til raske kontroller eller små kodeutdrag, men ikke til en full produksjonspipeline.

Ofte stilte spørsmål

Hva fjerner en JavaScript-minifiserer?

Den fjerner kommentarer og blanktegn som ikke trengs for at koden skal kjøre. Den fjerner ikke semikolon, parenteser eller andre tegn som allerede var en del av koden.

Endrer minifisering av JavaScript hvordan det kjøres?

Nei. Minifisert kode skal gi samme resultater som originalen. Bare formateringen endres.

Hvorfor har minifisert kode noen ganger fortsatt linjeskift?

Et linjeskift kan kreves av JavaScripts regel for automatisk semikoloninnsetting, eller det kan følge en avsluttende klammeparentes }. Fjerning av det kunne endret hva koden gjør, så verktøyet beholder ett enkelt linjeskift på slike steder i stedet for å slette det.

Er minifisering det samme som komprimering?

Nei. Minifisering fjerner tegn fra selve kildekoden. Komprimering, for eksempel med gzip eller Brotli, koder filen på en annen måte for overføring over et nettverk. Nettsteder bruker vanligvis begge deler sammen.

Sendes koden min til en server?

Selve minifisereren kjører fullstendig i nettleserfanen, og koden lastes ikke opp for å bli minifisert. Den innlimte koden lagres i sidens adresse slik at et resultat kan deles eller bokmerkes, så den vises i nettleserens adressefelt og historikk.

Kan minifisert kode gjøres om til originalen?

Blanktegn kan gjenopprettes av et kodeformatteringsverktøy, men kommentarer og de opprinnelige variabel- og funksjonsnavnene er borte med mindre et separat kildekart ble lagret.

Referanser

  1. MDN Web Docs. "Minification." MDN-ordliste, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," avsnitt 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," avsnitt 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," avsnitt 22.2.6, "Properties of the RegExp Prototype Object" (flaggsettet d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object