Utilia
Kategoriat ▾
Kieli: fi ▾

JavaScript-muotoilija ja -pienentäjä

Siisti pienennetty JavaScript, pienennä se Terserillä tai tarkista sen syntaksi virheen tarkalla rivillä ja sarakkeella. Toimii vain selaimessasi.

Pienennysasetukset

Näin muotoilet tai pienennät JavaScriptiä

  1. Liitä koodisi tai napsauta Avaa tiedosto ladataksesi .js-, .mjs- tai .jsx-tiedoston (enintään 10 Mt).
  2. Valitse Sisennys ja, jos pidät Allman-tyylistä, rastita Aaltosulut omalle rivilleen.
  3. Napsauta Muotoile (siisti) tehdäksesi koodista luettavaa.
  4. Jos haluat pienentää sitä, aseta Pienennysasetukset ja napsauta Pienennä. Jos haluat vain etsiä virheitä, napsauta Tarkista syntaksi.
  5. Kopioi tai lataa tulos. Tilarivi näyttää koon ennen ja jälkeen sekä säästetyn prosenttiosuuden.

Koodia vain luetaan ja muunnetaan, sitä ei koskaan suoriteta: mitään liittämääsi ei ajeta tällä sivulla.

Siistiminen js-beautifyllä

Muotoile (siisti) käyttää js-beautifyta. Se asettaa yhden lauseen riviä kohden, sisentää lohkot, lisää välilyönnit operaattorien ympärille ja avainsanojen jälkeen sekä säilyttää enintään yhden tyhjän rivin kohdissa, joissa sinulla oli sellainen. Se ymmärtää myös modernin syntaksin (luokat, nuolifunktiot, mallimerkkijonot, async/await) ja JSX:n. Se on nopein tapa lukea pienennetty kirjasto tai verkkosivulta kopioitu yhden rivin koodinpätkä.

Siistiminen muuttaa vain tyhjiä merkkejä. Se ei tarkista, onko koodi kelvollista: puuttuva sulku tuottaa yksinkertaisesti oudon sisennyksen. Käytä siihen toimintoa Tarkista syntaksi.

Pienennys Terserillä

Pienennä käyttää Terseriä, jota useimmat JavaScriptin rakennustyökalut käyttävät pienentäjänä. Koska se on suuri, se ladataan vasta, kun napsautat ensimmäisen kerran Pienennä tai Tarkista syntaksi. Asetukset vastaavat suoraan Terserin asetuksia:

  • ES-moduuli (import/export) jäsentää koodin moduulina (module: true): tiukka tila on käytössä ja ylätason nimet ovat yksityisiä, joten ne voi nimetä uudelleen ja käyttämättömät voi poistaa. Jätä valitsematta perinteiselle skriptille, jonka globaaleja funktioita muut skriptit käyttävät.
  • Pakkaa (compress) kirjoittaa koodin uudelleen lyhyemmäksi vastaavaksi koodiksi: vakioiden laskeminen etukäteen (2*60 muuttuu muotoon 120), kuolleen koodin poisto, var-määritysten yhdistäminen, lyhyemmät ehdot.
  • Lyhennä muuttujien nimet (mangle) nimeää paikalliset muuttujat ja parametrit uudelleen yhden tai kahden kirjaimen nimiksi. Globaaleja nimiä ja olion ominaisuuksia ei koskaan nimetä uudelleen.
  • Säilytä lisenssikommentit säilyttää kommentit, jotka alkavat merkinnällä /*! tai sisältävät @license tai @preserve. Kaikki muut kommentit poistetaan.

Pienennys ei voi muuttaa sitä, mitä koodi tekee, mutta koodi, joka nojaa funktioiden nimiin (fn.name) tai eval-funktioon, voi käyttäytyä eri tavalla uudelleennimeämisen jälkeen. Poista tällöin Lyhennä muuttujien nimet -valinta.

Syntaksivirheet rivin ja sarakkeen kanssa

Kun Terser ei voi jäsentää koodia, Pienennä ja Tarkista syntaksi näyttävät virheilmoituksen rivin ja sarakkeen kanssa, esimerkiksi ”Rivi 12, sarake 8 – Syntaksivirhe: Unexpected token punc «)»”. Sarake lasketaan merkeistä 1:stä alkaen. Tyypillinen syy on puuttuva sulku aiemmin tiedostossa, joten katso myös ilmoitettua kohtaa edeltäviä rivejä.

Usein kysytyt kysymykset

Lähetetäänkö koodini minnekään?

Ei. js-beautify ja Terser toimivat molemmat selaimessasi, ja koodisi pysyy tietokoneellasi.

Voinko pienentää TypeScriptiä?

Et. Terser hyväksyy vain JavaScriptiä. Käännä TypeScript ensin JavaScriptiksi ja pienennä sitten tuloste. Yksinkertaisen TypeScriptin muotoilu Muotoile (siisti) -toiminnolla onnistuu usein, mutta tyyppimerkinnät voivat saada oudot välit.

Miksi pienennetty koodini näyttää erilaiselta kuin kirjoittamani?

Pakkaa laskee vakiolausekkeet, upottaa kerran käytetyt arvot ja poistaa saavuttamattoman koodin. Tulos toimii samoin. Poista Pakkaa-valinta, jos haluat poistaa vain tyhjät merkit ja kommentit.

Pitääkö ”ES-moduulin” vastata koodiani?

Pitää. Koodi, jossa on import tai export, pitäisi pienentää moduulina. Moduulina pienennetty perinteinen skripti voisi menettää globaaleja funktioita, joita muut skriptit kutsuvat, koska ylätason nimiä käsitellään silloin yksityisinä.

Entä JSON?

JSON on kelvollista JavaScriptiä, joten molemmat painikkeet hyväksyvät sen, mutta erillinen JSON-muotoilija antaa parempia virheilmoituksia ja lajittelee avaimet.

Aiheeseen liittyvät työkalut