Ugrás a tartalomra
🛠️
Whiz Tools

JavaScript Minifier - Ingyenes Online JS Kódoptimalizáló

Ingyenes JavaScript minősítő eszköz a kódméret csökkentéséhez a whitespace és megjegyzések eltávolításával. Optimalizálja JS fájljait azonnal, telepítés nélkül.

JavaScript Minifier

Eszköz leírása

Ez az egyszerű JavaScript minifier eltávolítja a felesleges szóközöket és megjegyzéseket a kód méretének csökkentése érdekében. Megőrzi a funkcionalitást, miközben tömörebbé teszi a kódot.

  • Felesleges szóközök eltávolítása (szóközök, tabulátorok, sortörések)
  • Megjegyzések eltávolítása (egysoros és többsoros)
  • Karakterláncok és reguláris kifejezések megőrzése
  • Kód funkcionalitásának fenntartása
Betöltési kalkulátor...
📚

Dokumentáció

Mi az a JavaScript-minifikáló?

A JavaScript-minifikáló olyan eszköz, amely a futtatásához a böngésző által nem szükséges karakterek, például a fölösleges szóközök, sortörések és megjegyzések eltávolításával csökkenti a JavaScript-forráskód méretét. A kód a minifikálás után is pontosan ugyanazt teszi. Csak a fájl mérete változik.

A kisebb JavaScript-fájlok gyorsabban töltődnek le és töltődnek be, ezért a minifikálás gyakori lépés egy webhely élesítése előtt.

Hogyan működik a JavaScript minifikálása?

Ez az eszköz karakterenként olvassa be a kódot, majd újra felépíti úgy, hogy elhagy mindent, amire az olvasóknak szükségük van, a JavaScript-motornak azonban nem. Eltávolítja a következőket:

  • A megjegyzéseket: mind a // single-line egysoros, mind a /* multi-line */ többsoros megjegyzéseket, beleértve a JSDoc-stílusú megjegyzéseket is.
  • A fölösleges szóközöket, tabulátorokat és üres sorokat, amelyek csak a kód olvashatóságát javítják.

Semmi mást nem ad hozzá és nem távolít el. Soha nem töröl pontosvesszőt, zárójelet vagy a kódban már szereplő más karaktert, és nem szúr be új írásjeleket sem. Több dolgot is változatlanul hagy:

  • A karakterláncokban ("like this", 'like this') és sablonliterálokban (`like this`) lévő szöveget, még akkor is, ha az szóközöket tartalmaz, vagy megjegyzésnek tűnik.
  • A reguláris kifejezés literáljait, például a /[a-z]+/g alakút, az összes jelzőjükkel együtt: d, g, i, m, s, u, v és y.
  • Minden olyan pontosvesszőt, vesszőt és zárójelet, amely már szerepelt az eredeti kódban.

Előfordul, hogy két token közötti szóköz nem távolítható el a jelentés megváltoztatása nélkül. A return a nem alakítható returna alakra, mert így egyetlen szóként lenne értelmezhető. Ugyanez vonatkozik az angol ábécén kívüli betűkkel írt nevekre is, ezért a typeof π megtartja a szóközét. Ha egy szóköz eltávolítása két tokent összeforrasztana, az eszköz helyette egyetlen szóközt hagy meg.

A sortörés is számíthat. A JavaScript időnként automatikusan pontosvesszőt illeszt a sor végére; ezt a szabályt automatikus pontosvessző-beszúrásnak nevezik. Ha egy sortörés törlése kiválthatná vagy megakadályozhatná ezt a szabályt, illetve ha a sortörés egy záró kapcsos zárójel } után áll, az eszköz egyetlen újsort hagy meg ott. Ezért a minifikált kód nem mindig szorítható egyetlen sorba: egyes sortörések megváltoztatnák a kód jelentését, ezért meg kell maradniuk.

A JavaScript-minifikáló használata

  1. Illessze be a JavaScript-kódot a bemeneti mezőbe.
  2. Válassza a „Minify” lehetőséget.
  3. Olvassa el az eredményt a kimeneti mezőben az eredeti mérettel, a minifikált mérettel és a százalékos csökkenéssel együtt.
  4. A minifikált kód másolásához válassza a „Copy” lehetőséget.

A minifikálás a böngészőlapban fut, ezért a kód feldolgozás céljából nem kerül sehova feltöltésre. Az eszköz a beillesztett kódot az oldal címébe is bemásolja, így az eredmény könnyen könyvjelzőzhető vagy megosztható. Ezért bárki láthatja a kódot, aki hozzáfér az oldal címéhez.

Példa: egy függvény minifikálása

Előtte:

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

Utána:

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

Mindhárom megjegyzés eltűnik, és a behúzás is megszűnik. A a+b utáni pontosvessző megmarad, mert az eszköz soha nem töröl olyan pontosvesszőt, amely már szerepelt a kódban. A const előtti sortörés is megmarad, mert egy záró } után áll.

Példa: egy osztály minifikálása

Előtte:

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

Utána:

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

Figyelje meg, hogy minden metódus előtt és az osztály záró } jele előtt megmarad egy sortörés. Az eredeti kódban mindegyik ilyen sortörés egy záró } után következik, ezért az automatikus pontosvessző-beillesztést védő szabály megtartja őket. Az egyes metódusokon belüli pontosvesszők szintén megmaradnak.

A méretcsökkenés képlete

Az eszköz három számot jelenít meg a kimeneti mező alatt: az eredeti méretet, a minifikált méretet és a csökkenést. Minden méret a karakterek számát jelenti, nem a bájtokét. A csökkenés százalékos érték, a legközelebbi egész számra kerekítve:

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

A fenti függvénypéldában minifikálás előtt 213 karakter volt, utána pedig 103. Ezért 1–103 / 213 = 0,5164, ami 51,64%, az eszköz pedig 52% értéket jelenít meg. Az osztálypélda 515 karakterről 304 karakterre csökken, ami 40,97%, kerekítve és megjelenítve pedig 41%.

A minifikáló korlátai

Ez az eszköz csak a megjegyzéseket és a szóközöket távolítja el. A Terserhez vagy az UglifyJS-hez hasonló, buildfolyamatban használt eszközökkel ellentétben nem nevezi át a változókat, nem törli a nem használt kódot, és nem von össze fájlokat. Ezek az eszközök általában kisebb kimenetet állítanak elő, de futtatásukhoz buildfolyamat szükséges. Ez az eszköz azonnal működik a böngészőben, beállítás nélkül, ezért inkább gyors ellenőrzésekhez vagy kisebb kódrészletekhez alkalmas, nem teljes éles környezetű feldolgozási folyamathoz.

Gyakran ismételt kérdések

Mit távolít el egy JavaScript-minifikáló?

A kód futásához nem szükséges megjegyzéseket és szóközöket távolítja el. Nem töröl pontosvesszőket, zárójeleket vagy a kód részét már képező más karaktereket.

Megváltoztatja a JavaScript működését a minifikálás?

Nem. A minifikált kódnak ugyanazokat az eredményeket kell adnia, mint az eredetinek. Csak a formázás változik.

Miért vannak a minifikált kódban néha mégis sortörések?

A sortörést szükségessé teheti a JavaScript automatikus pontosvessző-beillesztési szabálya, illetve állhat egy záró kapcsos zárójel } után. Az eltávolítása megváltoztathatná a kód működését, ezért az eszköz ezeken a helyeken egyetlen újsort hagy meg a törlés helyett.

A minifikálás ugyanaz, mint a tömörítés?

Nem. A minifikálás magából a forráskódból távolít el karaktereket. A tömörítés, például a gzip vagy a Brotli, a fájlt a hálózaton történő továbbításhoz eltérő módon kódolja. A webhelyek gyakran mindkettőt együtt használják.

A kódom elküldésre kerül egy szerverre?

Maga a minifikáló teljes egészében a böngészőlapon fut, és a kódot nem töltik fel minifikálás céljából. A beillesztett kódot az oldal címe tárolja, így az eredmény megosztható vagy könyvjelzőzhető; ezért megjelenik a böngésző címsorában és előzményeiben is.

Visszaalakítható a minifikált kód eredeti állapotára?

A szóközöket egy kódformázó visszaállíthatja, de a megjegyzések, valamint az eredeti változó- és függvénynevek elvesznek, hacsak nem mentettek külön forrástérképet.

Hivatkozások

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