JavaScript-pienentäjä (JS Minifier)

Liitä JavaScript pienentääksesi sen Terserillä: kuollut koodi poistetaan, nimet lyhennetään ja tyhjätila katoaa. Syntaksivirheet osoittavat tarkan rivin ja sarakkeen.

Toimii selaimessaEi rekisteröitymistäMitään ei lähetetä

Pienennetty tulos

Näin käytät työkalua: JavaScript-pienentäjä

  1. Liitä JavaScript tai avaa .js-tiedosto.
  2. Valitse asetukset: Lyhennä nimet lyhentää paikalliset muuttujat, Pakkaa kirjoittaa koodin pienemmäksi vastineeksi, ES-moduuli sallii ylätason import/export-lauseet.
  3. Valitse ECMAScript-kohde, jota käyttäjiesi selaimet tukevat. ES2020 on turvallinen kaikille jatkuvasti päivittyville selaimille.
  4. Tarkista koko, säästö ja gzip-arvio tuloksen alta.
  5. Kopioi pienennetty koodi tai lataa se nimellä output.min.js.

Mitä JavaScript-pienentäjä tekee?

Pienentäminen tekee JavaScriptistä pienempää muuttamatta sen toimintaa. Tämä työkalu käyttää Terseriä, webpackin, Viten ja Rollupin taustalla olevaa pienentäjää, ja tekee kolmenlaisia muutoksia:

  • Tyhjätilan ja kommenttien poisto: JavaScript-moottori ei tarvitse sisennyksiä, rivinvaihtoja eikä kommentteja.
  • Nimien lyhentäminen (mangling): paikallisten muuttujien ja funktioparametrien nimet, kuten subtotal, muuttuvat yksittäisiksi kirjaimiksi. Globaaleihin nimiin ja olioiden ominaisuuksiin ei kosketa, joten julkinen API toimii edelleen.
  • Pakkaus: vakiolausekkeet lasketaan valmiiksi, saavuttamaton koodi poistetaan, if-lauseista tulee ternäärilausekkeita ja lyhyet funktiot upotetaan.

Pienennys vai gzip: tarvitaanko molempia?

Kyllä. Gzip ja Brotli pakkaavat toistuvia tavukuvioita siirrossa, kun taas pienennys poistaa tavuja, jotka selaimen pitäisi muuten ladata, jäsentää ja kääntää. Tyypillinen skripti pienenee pienennyksellä 40–60 % ja sen jälkeen gzipillä vielä 60–70 %. Tässä näytetty gzip-koko on hyvä arvio siitä, mitä palvelimesi todella lähettää.

Lisenssikommenttien säilyttäminen

Monet avoimen lähdekoodin lisenssit (MIT, BSD, Apache) edellyttävät, että tekijänoikeusilmoitus säilyy koodin mukana. Käytännön mukaan kommentit, jotka alkavat merkeillä /*! tai sisältävät @license tai @preserve, säilytetään, kun Säilytä lisenssikommentit on päällä.

Milloin ei kannata pienentää käsin

Jos projektisi käyttää jo bundleria, anna sen pienentää tuotantoversiot ja luoda source mapit debuggausta varten. Verkossa toimiva pienentäjä sopii erinomaisesti yksittäisiin skripteihin, CMS:n tai tag managerin koodinpätkiin, bookmarkletteihin ja sen tarkistamiseen, kuinka pieneksi koodinpala voi kutistua.

Usein kysytyt kysymykset

Lähetetäänkö koodini palvelimelle?
Ei. Terser toimii selaimesi välilehdessä, joten suljettu koodi ei koskaan poistu koneeltasi.
Voiko pienentäminen rikkoa koodini?
Terser tekee vain muunnoksia, jotka pitävät kelvollisen JavaScriptin toiminnan identtisenä. Koodi, joka nojaa Function.prototype.toString()-metodiin tai paikallisten muuttujien nimiin eval-kutsun kautta, voi kärsiä; kytke siinä tapauksessa Lyhennä nimet pois.
Tukeeko se modernia syntaksia, kuten async/await, luokat ja optional chaining?
Kyllä. Terser jäsentää ES2022+-syntaksia. Kohdeasetus määrää vain, mitä syntaksia tulos saa käyttää; se ei käännä uusia ominaisuuksia vanhemmiksi.
Mitä eroa on minifyllä ja uglifyllä?
Ne tarkoittavat samaa. UglifyJS oli klassinen työkalu; Terser on sen ylläpidetty haara, jossa on täysi ES2015+-tuki.

Aiheeseen liittyvät työkalut

CSS-pienentäjä Pienennä tyylitiedostoja: lyhennä arvot ja yhdistä säännöt. HTML-pienentäjä Poista kommentit ja tyhjätila sekä pienennä upotettu CSS/JS. JSON-muotoilija Muotoile, pienennä ja validoi JSON rivi- ja saraketarkoin virhein. SQL-muotoilija Muotoile tai pienennä SQL: PostgreSQL, MySQL, T-SQL, BigQuery ym.