JavaScript minifier

Illessz be JavaScriptet, és a Terser összezsugorítja: eltávolítja a halott kódot, lerövidíti a neveket, és eltünteti a szóközöket. A szintaktikai hibák pontos sorra és oszlopra mutatnak.

A böngésződben futNincs regisztrációNincs feltöltés

Minifikált kimenet

Hogyan használd: JavaScript minifier

  1. Illeszd be a JavaScript kódot, vagy nyiss meg egy .js fájlt.
  2. Válassz opciókat: a Nevek rövidítése lerövidíti a lokális változókat, a Tömörítés kisebb, egyenértékű kódra írja át, az ES modul pedig engedélyezi a legfelső szintű import/export utasításokat.
  3. Válaszd ki azt az ECMAScript célt, amelyet a felhasználóid böngészői támogatnak. Az ES2020 minden örökzöld böngészőben biztonságos.
  4. Nézd meg a kimenet alatt a méretet, a megtakarítást és a gzip-becslést.
  5. Másold ki a minifikált kódot, vagy töltsd le output.min.js néven.

Mit csinál egy JavaScript minifier?

A minifikálás kisebbé teszi a JavaScriptet anélkül, hogy megváltoztatná a működését. Ez az eszköz a Terser könyvtárat használja, amely a webpack, a Vite és a Rollup mögött álló minifier, és háromféle változtatást végez:

  • Szóközök és kommentek eltávolítása: a behúzásokra, sortörésekre és kommentekre a JavaScript-motornak nincs szüksége.
  • Mangling: a lokális változók és függvényparaméterek nevei, például a subtotal, egybetűssé válnak. A globális nevek és az objektumtulajdonságok érintetlenek maradnak, így a nyilvános API-d tovább működik.
  • Tömörítés: a konstans kifejezések kiértékelődnek, az elérhetetlen kód kikerül, az if utasításokból ternáris operátorok lesznek, a rövid függvények pedig beágyazódnak.

Minify vagy gzip: mindkettő kell?

Igen. A gzip és a Brotli az átvitel során az ismétlődő bájtmintákat tömöríti, a minifikálás viszont olyan bájtokat távolít el, amelyeket a böngészőnek egyébként le kellene töltenie, elemeznie és lefordítania. Egy tipikus script a minifikálástól 40–60%-kal, majd a gzip-től további 60–70%-kal lesz kisebb. Az itt látható gzip méret jó becslés arra, amit a szervered ténylegesen elküld.

Licenckommentek megtartása

Sok nyílt forráskódú licenc (MIT, BSD, Apache) előírja, hogy a szerzői jogi megjegyzés a kóddal maradjon. Megállapodás szerint a /*! kezdetű, illetve a @license vagy @preserve jelölést tartalmazó kommentek megmaradnak, ha a licenckommentek megtartása be van kapcsolva.

Mikor ne minifikálj kézzel?

Ha a projekted már használ bundlert, bízd rá a production buildek minifikálását és a hibakereséshez szükséges source mapek generálását. Az online minifier ideális egyszeri scriptekhez, CMS-be vagy tag managerbe szánt kódrészletekhez, bookmarkletekhez, és ahhoz, hogy megnézd, mennyire lehet kicsi egy kódrészlet.

Gyakran ismételt kérdések

Feltöltődik a kódom egy szerverre?
Nem. A Terser a böngészőlapodon fut, így a zárt forráskódod sosem hagyja el a gépedet.
Elronthatja a minifikálás a kódomat?
A Terser csak olyan átalakításokat végez, amelyek érvényes JavaScript esetén azonos viselkedést tartanak meg. Az a kód, amely a Function.prototype.toString() eredményére vagy az eval révén lokális változónevekre támaszkodik, érintett lehet; ilyenkor kapcsold ki a Nevek rövidítése opciót.
Támogatja a modern szintaxist, például az async/await-et, az osztályokat és az optional chaininget?
Igen. A Terser az ES2022+ szintaxist is értelmezi. A cél beállítás csak azt szabályozza, milyen szintaxist használhat a kimenet; az újabb funkciókat nem transpilálja régebbiekre.
Mi a különbség a minify és az uglify között?
Ugyanazt jelentik. Az UglifyJS volt a klasszikus eszköz; a Terser annak karbantartott forkja, teljes ES2015+ támogatással.

Kapcsolódó eszközök

CSS minifier Kisebb stíluslapok: rövidebb értékek, összevont szabályok. HTML minifier Kommentek és szóközök törlése, inline CSS/JS minifikálása. JSON formázó JSON formázás, minifikálás és validálás sor/oszlop pontos hibákkal. SQL formázó SQL formázása vagy minifikálása PostgreSQL, MySQL, T-SQL, BigQuery stb. számára.